创建组件
- 组件配置不能使用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原型上的属性,方法