vue同一父组件的两个子组件间的数据传输

北寂.

于 2022-02-18 17:01:23 发布

阅读量955

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45059900/article/details/123007207

版权

本文介绍了在Vue中如何使用vm.$on和vm.$emit实现同一父组件的两个子组件间的数据传输。子组件1通过$emit触发事件并传递参数，而子组件2通过$on监听该事件并接收参数。关键在于确保子组件在同一个Vue实例上绑定事件监听和触发。

摘要由CSDN通过智能技术生成

vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

父组件

//父组件
<template>
    <div>
    <children1  v-bind:children1 ="children1 "></children1>
    <children2  v-bind:children2 ="children2 "></children2>
    </div>
</template>
<script>
    import children1 from './children1.vue'
    import children2 from './children2.vue'
    import Vue from 'vue'
    export const event = new Vue();
    export default {
        data: function () {
            return {
                'ch