VUE的组件的学习

Vue中使用组件的三大步骤

1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

1.如何定义一个组件?

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别;

区别如下:

1. el不要写，为什么? —— 因为最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器。
2. data必须写成函数，为什么? ——因为避免组件被复用时，数据存在引用关系。
   备注：使用template可以配置组件结构。

 const student = Vue.extend({
            template:
                `<div>
                    <h2>学生：{{studentName}}</h2>
                    <h2>年龄：{{age}}</h2>
                </div>`,
            data(){
                return{
                    studentName:'张三',
                    age: 22
                }
            }
        })

2.如何注册组件?

1. 局部注册:靠newVue的时候传入components选项

new Vue({
            el:'#app',
            //局部注册组件
            components:{
                school,
                student
            }
        })

2. 全局注册:靠Vue.component( ‘组件名’ , 组件 )

 // 全局注册组件
        Vue.component('school',school)

3.编写组件标签:

<school></school>