javascript - 在vue.js中两个组件如何互相通信呢

Question

var vm = new Vue({
  el: '#list',
  ready: function(){
    var _this = this;
    var url = 'http://192.168.1.111:8080/api/v2/getCommonCourses';
    $.post(url,{'apiKey':apikey},function(data){
      console.log(data);
      if(data.status === 0) {
        _this.$broadcast('parent-msg',data.data);
      }
    },'json');
  },
  components: {
    courseList : List
  },
});

new Vue({
  el: '#condition',
  data: {
    isChecked: [1,0],
  },
  methods {
    common: function() {
      this.isChecked = true;
      
    },
    enterprise: function() {
      this.idChecked = false;
    }
  }
})

像这样的两个，非父子关系，当我触发common事件时，我需要刷新上面的list列表

Answer 1

这样的两个组件之间的通讯应该通过共同的父组件，不管是通过

1. refs方式：parent.$refs.list.<Method>

2. customer event方式: 先dispatch给父组件，再由父组件broadcast给子组件

3. props方式

这里推荐props方式。那么这里应该由三个组件：

1. FilterList (parent)

2. Condition (child)

3. List (child)
   并且由parent来享有数据：list和filterCondition，通过props传给child。

做了个示例