Vue-5-组件通信

            `,

             // 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'

})

[]( )跨组件层级组件通信

----------------------------------------------------------------------------



1.  转换为父子关系

2.  event-bus（事件总线）



*   借助 Vue 实例中的 $on() 与 $emit() 方法来实现：首先创建一个全局的 Vue 实例对象(bus)

*   在需要接收数据的组件中，利用 bus 来注册事件监听（绑定自定义事件）

*   在需要传递数据的组件中，利用 bus 来触发事件并传递数据



3.  vuex

4.  示例：当我们点击位于孙元素提交按钮时，父元素的回调函数`this.$bus.$on("transmit",val=>{ console.log(val)}) }`打印出来自孙元素传递的信息结果{name: ‘jack’, age: 20}

<meta charset="UTF-8">

<title>Title</title>

<father></father>