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原型上的属性，方法
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022/01/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
