Vue.js多重组件嵌套

Vue.js多重组件嵌套

Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如

的一个复合组件

1.js部分(component.js)

(function () {
Vue.component('app',{
template:'

这个地方在渲染后不会被占用

'
});
Vue.component('app-header',{
template:'

this is header

'
});
Vue.component('app-content',{
template:'

this is content

'
});
Vue.component('app-footer',{
template:'

this is footer

'
});
var myApp=new Vue({
el:'#myApp'
});
})()

代码解释:

1. Vue.component定义了一个组件,其中的'app'是组件的名称,可以在html代码中直接把它当成一个标签来使用

2. template表示这个组件实际由什么html代码组成,可以直接在解释中写,也可以写一个ID,然后再html代码中写一个template模板,模板的ID就是此处写的ID,形如:

//js代码
Vue.component('app-header',{
template:'#headerTemplate'
});
//html代码

3. 我们要把app-header,app-content,app-footer这些子组件都放在app里面装起来,如果app这个组件内部也有多个元素,那么Vue怎么知道你需要把这些子组件放在app的哪个位置呢?所以我们需要在app的模板中指定一个slot,意思就是,其他组件都放在它里面,而不要去填充其他元素

注意事项:实例化myApp一定要放在组件注册之后,否则会报错哦

2.html部分

html代码部分没有过多需要解释的,不过要注意的是引用component.js要在Vue.js以及页面渲染完成之后,否则会报错.

最后放上一张效果图