第十七节:带你梳理Vue2: Vue组件的认识,创建和使用

1. 认识Vue组件

组件系统是 Vue 的另一个重要概念，它是一种抽象的概念，类似于积木中的一块块小积木,通过这些小积木拼接成一个大的模型.

组件系统就是将页面一块小的区域处理为一个组件,我们使用这些小型、独立和可复用的组件构建大型应用。

仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

1.1 组件是什么

组件就是一段独立的,能代表页面某一个部分的代码片段, 拥有自己独立的数据,JavaScript脚本,以及样式的标签.

1.2 组件的好处:

1. 提高开发效率
2. 方便重复使用
3. 便于协同开发
4. 更容易被管理和维护

1.3 组件创建的基本步骤

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件

1.4 示例

通过一个示例来了解组件的使用

使用Vue的component方法注册全局组件

<div id="app-one">
    <!-- 3.在实例中使用组件 -->
    <greeting></greeting>
</div>

<script>
    
    // 1. 组件构造器
    let MyComponent= Vue.extend({
     
     
        // 配置对象
        // 因为组件没有挂在点,所以使用模板,只有一个根节点
        template: `
            <div>
                <p>大家好,我叫{
      
      {name}}</p>
                <button @click="changeName">点击换名字</button>
            </div>
        `,
        data: function(){
     
     
            return {
     
     
                name:"渣渣辉"
            }
        },
        methods:{
     
     
            changeName(){
     
     
                this.name = "古天乐"
            }
        }
    })

    // 2. 通过Component方法,将构造器扩展的构造函数创建组件实例
    Vue.component("Greeting",MyComponent)
    
   
   // Vue 实例
    const vm = new Vue({
     
     
        el:"#app-one",
    })

</script>

显示结果:

1.5 理解组件的创建和注册

1. Vue.extend()是Vue构造器扩展，调用Vue.extend()创建的是一个组件构造器，而不是具体的组件实例。
2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML模板。
3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数是组件的名，第2个参