var myheader_child = {
template: "<a >{{ geta }}{{getb}}{{getcount}}</a>",
props:["geta","getb","getcount"]
}
var myheader = {
template: "<p ><myheader-child v-bind:geta='a' v-bind:getb='b' v-bind:getcount='mycount'></myheader-child></p>"
,components: {
"myheaderChild": myheader_child, //先在components中注册,才能在template模板中使用。
},
props: ['mycount'],//显式声明
data: function () {
return {a: "aaaa", b: "bbbbbbb"};
}
}
var vm = new Vue({
el: "#app",
data: {
count: 2
},
components: {
"myheader": myheader
},
methods: {
plusone: function () {
this.count++;
}
}
})
//全局注册组件:
Vue.component("componentName",
{
template: "<p></p>",
props: ["propName"]
,data: function () {
return {"xxx": "yyyy"};
}
})
父子孙组件的传值说明和 Vue.component 与 new Vue({components:{} })的区别说明
最新推荐文章于 2024-08-31 22:56:20 发布