vue组件之间数据通信操作

image.png

• 父组件通知子组件
  父组件向子组件传递数据可以通过props
  props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值

• 子组件通知父组件
  简单来说通过$emit触发实例的事件，将数据传给监听器回调

 

 methods: {
            listenMe: function (somedata){
              this.childWords = somedata
            }
 }

 
like!

methods: {
      onClickMe: function(){
        this.$emit('child-say',this.somedata);
      }
    }

• 非父子组件通信
  在vue官网上介绍了非父子组件通信的方法 ，用过bus来承载数据
  在简单的场景下可以使用一个空的vue实例作为中央事件总线
  中央事件总线

// 根组件（this.$root)
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
   // 空的实例放到根组件下，所有的子组件都能调用
    Bus: new Vue()
  }
})

以下两个组件为兄弟组件，

提交

methods: {
   submit() {
     // 事件名字自定义，用不同的名字区别事件
      this.$root.Bus.$emit('eventName', 123)
    }
 }

// 当前实例创建完成就监听这个事件
  created(){
    this.$root.Bus.$on('eventName', value => {
      this.print(value)
    })
  },

  methods: {
    print(value) {
      console.log(value)
    }
  },

  // 在组件销毁时别忘了解除事件绑定
  beforeDestroy() {
     this.$root.Bus.$off('eventName')
  }