vue兄弟组件之间传值

vue兄弟组件之间传值的方式有哪些呢？我们一起来看看吧！

兄弟组件指的是在同一个根组件中的组件, 组件之间没有使用关系。

兄弟组件之间的数据传值有两种方式：

第一种在组件结构相对简单情况下,可以通过兄弟组件中的父组件， 子组件先把数据传递给父组件，父组件再传递给另外的子组件；

第二种是在兄弟组件中创建一个公共的vue实例来实现事件的发出和监听。

以下是操作示范：

vue实例：

import Vue from 'vue'

export default new Vue()

接着在子组件中引入公共的vue实例, 通过vue实例来发出事件：

methods: {

    tellname () {

       // 发出事件，传递数据　　givename自定义事件

　　   bus.$emit('givename', this.mybfname) 

　　} 

}

然后将另外的子组件引入公共vue实例, 通过vue实例监听事件并接收数据：

import bus from '@/utils/myvue.js'

// 组件一加载就进行兄弟组件所发出的事件的监听

  mounted () {

    // $(dom).on('click',function(){})

    // bus.$on(兄弟组件中自定义的事件, 处理函数)

    // 处理函数有一个默认参数，就是其它组件所传递的数据

    bus.$on('givename', (data) => {

      console.log(data);

      this.mysbfname = data

    })

  }

关于兄弟组件之间的数据传值方式，我们就分享到这啦！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。