vue.extend(),自己的小理解
1、Vue.extend()官网的解释使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。2、个人理解认识Vue.extend({template:'<h1>......</h1>',data(){}})通过他构建出来的类似与一个模板对象,要想使用需要借助于Vue.component()...
·
1、Vue.extend()官网的解释
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
2、个人理解认识
var myextend=Vue.extend({
template:'<h1>......</h1>',
data(){}
})
通过他构建出来的类似与一个模板对象,也可以说,他返回的是一个更像是一个构造函数,在需要使用的地方借助于·Vue.component()
生成一个组件,然后使用。就像是我们在JS中使用的构造函数,先定义好,然后在需要使用的地方new一下。
ps: 实例化extend构造器时,传入属性需要使用propsData,而不是props
<div id="todoItem"></div>
<script>
var todoItem = Vue.extend({
data() {//这里必须使用方法
return {
todoData: [
{ id: 0, text: '张三' },
{ id: 1, text: '李四' },
{ id: 2, text: '王五' }
]
}
},
props:['todoData'],
template: `
<ul>
<li v-for='(item, i) in todoData' :key="i">
{{ item.text }}
</li>
</ul>
`
});
new todoItem({
propsData: {//这里必须使用propsData
todoData: [
{ id: 0, text: '花花' },
{ id: 1, text: '花花' },
{ id: 2, text: '花花' }
]
}
}).$mount('#todoItem')
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)