组件通信
组件间进行数据的传递称为组件通信
父子组件通信
父传子：利用属性(props)的方式传递数据
- 子组件定义时，在选项中使用 props 定义组件可接收的属性
- 父组件中使用到子组件（标签）时，在标签内部书写需要传递给子组件的数据（是 name=value 键值对格式的属性）
子传父：利用事件方式传递数据
- 父组件中使用到子组件标签时，利用 v-on 注册一个自定义的事件监听，通常引用在父组件中定义的 methods 方法去处理接收到的数据
- 在子组件中需要传递数据时，调用 this.$emit(eventName, data) 触发在父组件中绑定的自定义事件并传递数据即可（$emit() 的第二个参数是需要传递给父组件的数据）
示例：页面中子元素内容为有父组件传递的信息:小明男。但我们点击子元素时，父元素也会发生改变这是父组件内容：{ “name”: “jack”, “age”: 20 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<father></father>
</div>
<script src="../libs/vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<div >这是父组件内容：{
{message}}</div>
<son name="小明" sex="男" v-on:listenSon="handlerListen"></son>
</div>
`,
//这里无论是父传子，还是子传父，都是在<son>上作为媒介传输的
//这里name和sex是父元素传递给子元素的
//v-on:listenSon自定义的事件，父元素监听子元素传递的信息的，listenSon是传输时的名字（ip）
data() {
return {
message:"这是父组件信息"
}
},
methods: {
//定义子元素传递的信息处理函数
handlerListen(value){
this.message=value
}
},
components:{
son:{
template: `
<div>
<span>子组件信息</span>
<span>父组件传递的信息:{
{name}}{
{sex}}</span>
<button @click="submitFather">提交到父组件</button>
</div>
`,
// props: ['name', 'sex', 'phone'], // 声明组件可接收的属性名称，下面代码简写形式
props:{
//这里可对父元素进行验证，是否是字符串，是否必填
name:{
type:String,
required:true
},
sex:{
type:String,
required:true
}
},
methods:{
//当按钮点击时，定义向父元素传递消息的函数
submitFather(){
//向父元素发送消息
this.$emit('listenSon',{
name:"jack",age:20})
}
}
}
}
})
//实例化Vue，也就是将id=App这个节点挂载到Vue下
const vm=new Vue({
el:'#app'
})
</script>
</body>
</html>
跨组件层级组件通信
- 转换为父子关系
- event-bus（事件总线）
- 借助 Vue 实例中的 $on() 与 $emit() 方法来实现：首先创建一个全局的 Vue 实例对象(bus)
- 在需要接收数据的组件中，利用 bus 来注册事件监听（绑定自定义事件）
- 在需要传递数据的组件中，利用 bus 来触发事件并传递数据
- vuex
- 示例：当我们点击位于孙元素提交按钮时，父元素的回调函数
this.$bus.$on("transmit",val=>{ console.log(val)}) }打印出来自孙元素传递的信息结果{name: ‘jack’, age: 20}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<father></father>
</div>
<script src="../libs/vue.js"></script>
<script>
// const eventBus=new Vue()
//注释内容等同于下面这种都是注册事件总线bus
Vue.prototype.$bus=new Vue()
Vue.component('father',{
template:`
<div>
<div>这是父组件内容：{
{message}}</div>
<son></son>
</div>
`,
data() {
return {
message:"这是父组件信息"
}
},
methods: {
transmitFatherHandle(val){
console.log(val)
}
},
created(){
// eventBus.$on("transmit",this.transmitFatherHandle)
//接受孙元素发过来的消息，两个参数（事件名，回调函数）
this.$bus.$on("transmit",val=>{
console.log(val)})
},
components:{
son:{
template: `
<div>
<span>子组件信息</span>
<grandson></grandson>
</div>
`,
components: {
grandson:{
template:`
<div>
<div>孙子组件信息</div>
<button @click="transmitHandle">提交到父元素</button>
</div>
`,
methods:{
transmitHandle(){
// eventBus.$emit("transmit",{name:'jack',age:20})
//发送给父元素信息，两个参数（事件名，传递的值）
this.$bus.$emit("transmit",{
name:'jack',age:20})
}
}
}
}
}
}
})
const vm=new Vue({
el:'#app',
})
</script>
</body>
</html>