vue2笔记4 组件

创建组件

• 组件配置不能使用el,组件由vm管理
• data必须写为函数形式，保证每个组件实例的data独立

const student = Vue.extend({
   name:'student', // 可选，此名称会影响开发者工具中呈现的名称
   template: `
     <div>{{ name }}-{{ age }}</div>
   `,      
   data() {
        return {
            name: '',
            age: 0
        }
    }
})

简写

const student = {}; //直接写配置项无需写Vue.extend

注册使用组件

推荐命名方式：连字符连接多个小写单词，使用脚手架可以支持首字母大写驼峰模式

// 局部注册
let vm = new Vue({
	// 非脚手架环境下使用自闭合标签会导致bug
    template: `
      <student></student>,
      <student/>
    `,
    components: {
        student: student
    },        
}).$mount('#root');
// 全局注册
Vue.component('student', student);

组件嵌套

组件配置内定义components注册子组件即可

一般来说注册单独一个App组件作为根组件注册到vm

组件构造函数

• Vue.extend生成的组件对象是一个名为VueComponent的构造函数
• Vue解析组件注册的标签时，执行 new VueComponent(options)创建组件实例对象
• 每次调用Vue.extend都返回一个全新的VueComponent构造函数

Vue.extend = function (extendOptions) {
    ...
    var Sub = function VueComponent (options) {
      this._init(options);
    };
    ...
    return Sub
  };
}

• 组件配置中，data函数，methods、watch、computed中的函数，this是VueComponent实例对象
• new Vue配置中，data函数，methods、watch、computed中的函数，this是Vue实例对象
• VueComponent.prototype.proto === Vue.prototype ，即组件实例对象可以访问到Vue原型上的属性，方法