目录
- 全局组件
- 局部组件
组件的嵌套(父子组件)- 子组件向父组件传数据(
子父同步)- 子组件修改父组件数据
- componet & v-bind:is
- slot
- 组件之间进行数据发送
什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
全局组件
注意所有加在Vue上的内容,必须写在实例挂载之前
全局组件在所有Vue实例的视图都是可以使用的
HELLO
"
});
//1.通过vue的extend这个方法创造一个模板 template:"真是的标签(自定义标签所代表的内容)"
Vue.component("hello",tmp);
Vue.component("自定义标签",模板)
//2.通过Vue中component将这个模板赋给当前自定义标签
let vv=new Vue({
el:"#app",
})
方法二:
Vue.component("love",{
template:"{{msg}}
",
//组件中默认不可以使用Vue实例的数据,只能用自己组件中提供的数据
//可以写当前组件中的数据 data是个函数 return出一个对象,对象中就是我们想要的数据
data(){
return {
msg:"hello"
}
}
});例子:
- 初见
- 相恋
- 相守
"
});
let v1=new Vue({
el:"#app",
});
let v2=new Vue({
el:"#app2",
})
最终页面呈现:
初见
相恋
相守
初见
相恋
相守局部组件
[局部组件-在Vue实例中添加组件,只在当前实例的视图中使用]
局部组件也是不可以直接使用当前实例中的数据,只能使用当前
组件中自己data,也是一个函数,return一个对象,这个对象中就是想要数据,每一个组件之间不可以直接相互使用
[看代码]
{{msg}} {{wd}}
{{h}}
",
data(){
return{
h:"大家好"
}
}
},
hello:{
template:"{{h}}
",
data(){
return{
h:"吃了吗?"
}
}
},
bay:{
template:"bay-bay
"
}
}
});组件的嵌套(父子组件)
[在一个组件中再注册(嵌套)一个组件-父子组件]
在vue2.0中必须包一个根元素,不然就报错
[Component template should contain exactly one root element]在2.0中同级组件是不可以直接相互使用的.
子组件不可以直接使用父组件的数据.
PARENT
CHILD1
CHILD1:{{msg}}
",
报错 "msg" is not defined
子组件不可以使用父组件的数据
},
child2:{
template:"CHILD2
"
}
}
}
}
})[自定义HTML模板]+[子组件获取父组件数据]
组件中的模板
template还可以写在HTML结构中,这样也避免了如果拼接内容过多,在Vue实例中显示杂乱的问题,同样也便于集中管理-这也叫做自定义HTML模板
看代码
{{msg}}
{{mm}}的第{{num}}孩子 {{ss}}
",
//获取绑定的数据,绑定的数全部放在props中
//props:["num","mm"],
//props:["num",{"mm":"String"}]
//如果想规定数据的的类型
props:{mm:String},
data(){
return{
ss:"SS"
}
}
}
}
}
}
})
最终页面呈现:
我是老实人
我是老实人的第孩子 SS子组件向父组件传数据(子父同步)
[核心思想:子组件发射数据,由父组件来接收]
[$emit("发射数据名",发射数据)]数据发射属性
儿子你今年{{age}}岁
我今年{{trueAge}}岁
",
data(){
return{
trueAge:27
}
},
methods:{
say(){
//console.log(this);
//this就是当前组件child1
//$emit("发射出去数据我们给他起的名字",你想要发射出去的数据)
this.$emit("a",this.trueAge);
}
}
}
}
}
}
})进阶例子:
子组件修改父组件数据
实现点击子组件后让父组件的内容变为与子组件相同
{{name.XX}}