vue教程-兄弟组件传递数据

作者：马育民 • • 阅读：10086

介绍

兄弟组件传递数据，也是通过 事件 实现的，但是与 子组件向父组件不同，兄弟组件需要 事件中心

事件中心：就是一个 vue 对象

组件A 向 组件B 传递数据 流程图

步骤

  1. 创建 事件中心
  2. 组件B 向事件中心 注册 监听事件
  3. 组件A 向事件中心 触发 事件

相关 api

  • vm.$on( event, callback ) ：注册监听事件，详见

  • vm.$emit( eventName, […args] )：触发事件，详见

案例

两个组件：点击 组件A的男，组件B的文本框显示男

组件A

var com_a={
    data:function(){
        return{
            sex:''
        }
    },
    template:`<div>组件A：
        <div><input type='radio' value='女' @change='handle()' v-model="sex">女</div>
        <div><input type='radio' value='男' @change='handle()' v-model="sex">男</div>
        </div>`,

    methods: {
        handle:function(){
            eventHub.$emit('change',this.sex)
        }
    }
}
Vue.component("com-a",com_a)

关键：

  • radio按钮要实现 change 事件，不能用 click 事件

  • eventHub.$emit('change',this.sex) 参数解释：

    • 第一个参数是要 触发的事件

    • 第二个参数是 传递的值

组件B

var com_b={
    data:function(){
        return {
            msg:''
        }
    },
    template:`<div>组件B：
        <input type="text" v-model="msg"></div>`,
    mounted:function () {
        eventHub.$on('change', val=>{
            this.msg=val
        })
    }
}
Vue.component("com-b",com_b)

关键：

  • mounted：vue声明周期钩子函数之一，实例被挂载后自动调用该函数。详见

  • vm.$on( event, callback )：参数解释：

    • 第一个参数是 监听事件

    • 第二个参数 是回调函数，其参数是传递来的值

完整代码

<div id="app" >
    <std-com></std-com>
    <std-com2></std-com2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    var eventHub=new Vue();

    var std_com={
        data:function(){
            return{
                sex:''
            }
        },
        template:`<div>组件A：
            <div><input type='radio' value='女' @change='handle()' v-model="sex">女</div>
            <div><input type='radio' value='男' @change='handle()' v-model="sex">男</div>
            </div>`,

        methods: {
            handle:function(){
                eventHub.$emit('change',this.sex)
            }
        }
    }
    Vue.component("std-com",std_com)


    var std_com2={
        data:function(){
            return {
                msg:''
            }
        },
        template:`<div>组件B：
            <input type="text" v-model="msg"></div>`,
        mounted:function () {
            eventHub.$on('change', val=>{
                this.msg=val
            })
        }
    }
    Vue.component("std-com2",std_com2)


    new Vue({
        el: '#app'
    })
</script>

原文出处：/show_1IXU6lH5a5x.html

吉ICP备15003043号