Vue组件基础 (重点)

组件实现与步骤

什么是组件化？
  • 人面对复杂问题的处理方式：

任何一个人处理信息的逻辑能力都是有限的。
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆内容。
但是，我们人有一种天生的能力，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现问题也会迎刃而解。

新房装修 改水电 地板砖 木工进厂 刷漆 买家具 家电 入住

  • 组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么，之后整个页面的管理和维护就会变得非常容易了。

Vue的组件化思想

组件: 页面上的一部分

可以把一个大的网页, 拆分成很多个页面组件进行维护，根据页面组件中的通用功能抽离功能组件

举例！

  • 组件化思想的应用：

    有了组件化的思想，我们在之后的开发中就要充分的利用它。

    尽可能的将页面拆分成一个个小的、可复用的组件。

    这样让我们的代码更加方便组织和管理，并且扩展性也很强。

注册组件的基本步骤

组件的使用分成三个步骤：

  1. 调用Vue.extend()方法创建组件构造器。
  2. 调用Vue.component()方法注册组件。
  3. 在Vue实例的作用范围内使用组件。
// 1 构造组件
const copyRight = Vue.extend({
    data() {
        return {
            message: '我是组件的信息'
        }
    },
    template: `<div>
                    {{message}}
                    <button @click="changeText">改变</button>
                </div>

                `,
    methods: {
        changeText() {
            console.log(123);
            this.message = '更改后的信息'
        }
    },
})
// 2 注册组件 - 全局注册
Vue.component('copy-right', copyRight)
// 3 使用
<div id="app">
    <copy-right></copy-right>
</div>

注册组件步骤解析：

  • 这里的步骤都代表什么含义呢？

Vue.extend()：

调用Vue.extend()创建的是一个组件的构造器。 创建一个组件。

通常在创建组件构造器时，传入template代表我们自定义组件的模板。重要的是，组件的内容必须要用一个根元素来进行包裹，且只能有一个根元素。


当多个根元素，会报以下错误：
vue.js:634 [Vue warn]: Error compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

4 |
5 |