详解vue父子模版嵌套案例

2020-06-16 06:21:57易采站长站整理

//定义父组件
var Parent = Vue.extend({
template: '<div style="border: 1px solid #ccc;width:200px;">Parent<child-component></child-component>父模版内部</div>',
components: {
// 调用子组件
'child-component': Child
}
});
// 注册父组件
Vue.component('my-component', Parent);
//复用子组件。
Vue.component('child', Child);
// 创建根实例,所有组件都需要在根实例之前创建。
new Vue({
el: '#example'
})
</script>