1组件
//扩展html元素，封装可重用代码
// Vue.component
//组件编写与Vue实例的区别
//自定义组件需要有一个root element
//父子组件的data是无法共享的
//组件可以有data,method,computed 但是 data必须是一个函数
Vue.component("navbar",{
template:`<div style="background:yellow">
<button @click="handleClick()">返回</button>
{{navbarname}}
<button>首页</button>
<child></child>
<navbarchild></navbarchild>
</div>`,
methods: {
handleClick(){
alert("返回")
}
},
data(){
return {
navbarname:"navbarname"
}
},
//局部定义组件
components:{
navbarchild:{
template:`<div>navbarchild----只能在navbar中使用</div>`
}
}
})
2.父组件传子组件（使用动态绑定）
-如果想传递一个对象的话使用动态绑定
//属性验证 校验一下父组件传过来的值是否符合属性 null为不限制类型
<navbar :myname="parentname" :myshow="true"></navbar>
props:{
myname:String,
myshow:Boolean
}
3.子组件传递父组件
子传父用的是事件向上传，
在子组件中调用 this.$emit("父组件中的方法")
<body>
<div id="box">
父组件
<child @myevent="handleEvent($event)"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `<div>
child子组件
<button @click="paymoney()">click</button>
</div>`,
data() {
return {
chilrdName: "子组件得状态"
}
},
methods:{
paymoney(){
this.$emit("myevent",this.chilrdName) //分发事件
}
}
})
new Vue({
el: '#box',
methods: {
handleEvent(ev) {
console.log("父组件收到钱了"+ev)
}
}
})
</script>4.ref通信
ref 放在标签上 是一个原生节点
ref 放在组件上， 是一个组件对象
点击完会获取组件的对象。通过this.$refs.组件名.组件中的方法可以调用组件中的方法。
<child ref="mychild"></child>
this.$refs.mychild.add("");父组件获取子组件里面的add()方法
5.非父子组件的通信
（1）.//*事件总线
var bus = new Vue();//一个空的Vue实例就i是*事件总线
（2）. //一个组件推送一个消息
bus.$emit("weixinmessage",this.$refs.mytext.value);
（3）在另一个一个组件的合适的地方进行监听
//这是一个生命周期函数
mounted() {
//用总线进行监听
bus.$on("weixinmessage",(data)=>{
console.log("收到推送"+data)
})
console.log("生命周期函数，当前组件dom创建完成 就会调用")
}
<!--监听的用$on 被监听的用$emit-->
6.动态组件 使用:is
<!--动态组件可以帮助我们更加方便管理多个组件
<component>元素动态绑定多个组件到他的is属性上 这样会删除组件
<keep-alive>保留状态，防止重新渲染
-->
<keep-alive>
<component :is="who"></component>
</keep-alive>
7.slot 插槽
<!--前景，想在组件中添加一个div,但是会被template完全覆盖，这时候，
在孩子组件中添加一个<slot>标签，插槽就是预留的位置，
slot 内容分发 把父组件的内容分发到孩子组件中
目的：就是把父组件的内容与子组件的内容进行混合
为什么要这么写？写死不行么?
在其他页面也需要的时候，写死就不行了,组件使用别人的，数据使用自己的 ，就是不知道以后要写什么，预留出来的
改造子传父
<!-- 父组件的内容在父组件作用域内编译，子组件的内容在子组件作用域编译-->
在child里想把111放在child上面，把222放在child下面
使用具名插槽 具有名字的插槽
<child>
<div slot="a">1111</div>
<div slot="b">222</div>
</child>