Vue 兄弟组件之间数据传递

最新推荐文章于 2023-01-23 16:30:05 发布

Seric.

最新推荐文章于 2023-01-23 16:30:05 发布

阅读量435

点赞数 1

分类专栏： Vue 组件通信 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Seric_xiao/article/details/120480994

版权

本文介绍如何在Vue.js中实现兄弟组件之间的数据传递，主要利用事件总线进行通信。步骤包括：在父组件中创建兄弟组件，定义事件总线，组件间分别发射和监听事件，以及展示具体的代码实现。

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

兄弟组件传值，通过事件总线完成。

1、定义父组件并且在父组件中，完成两个兄弟组件的创建。

 <script>
        Vue.component('father', {
            template: '<div><son></son><daughter></daughter></div>',
            components: {
                son: {
                    data() {
                        return {
                            mySisterName: ''
                        }
                    },
                    template: '<div>我妹妹叫{
  {mySisterName}}</div>'
                },
                daughter: {
                    data() {
                        return {
                            myName: '小雪'
                        }
                    },
                    template: '<button @click="emitMyName">告诉哥哥我叫{
  {myName}}</button>',
                    methods: {
                        emitMy