**
vue中的父子组件
**
具有上述模样的具有嵌套关系的就是父子组件。我们先用代码定义一个组件名字为comp1
// 定义组件1
const comp1 = Vue.extend({
template:
<div>
<p>组件1</p>
</div>
})
然后再定义第二个组件名为comp2
// 定义组件2
const comp2 = Vue.extend({
template:
<div>
<h2>组件2</h2>
<comp1></comp1>
</div>
components:{ // 局部组件
comp1: comp1
}
})
我们发现, 在组件comp2中注册了comp1组件, 这里comp2是父组件, comp1是子组件.
最后我们可以把comp2注册到Vue对象上, 在页面就可以调用了
// vue也是一个组件, 是一个root根组件
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
components:{
comp2: comp2
}
});
注:如果在引用过comp1之后再下述代码中再次引用comp1之后回报错。
components:{
comp2: comp2
}
vue也是一个组件,是一个root组件,,root组件也叫根组件,相当于组件树开头的,最顶端的那个组件。
组件的语法糖
// 语法糖的写法
Vue.component('comp2', {
template: '<div><h2>你好, 语法糖写法!</h2></div>'
})
直接注册和引用。但是会将html和组件的代码写在一起会很混乱和麻烦。