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
        })
      }

总结

1.只要你是通过公共的事件总件来发出事件，那么在任何一个组件中就能通过这个公共的事件总件进行事件的发出即监听
2.这种方式超出了组件使用关系的限制
3.在组件中使用this发出事件，只能在父组件中进行监听