Vue-5-组件通信

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'

})

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

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



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>