Vue组件之间的通信（一）

子组件调用父组件方法并改变父组件下另一个子组件的data

子组件

<el-menu>里@select="handleSelect"然后

methods: {
      handleSelect(key,keyPath){
        this.cid= key
        this.$emit('indexSelect') //emit，即触发，在子组件中使用 $emit 方法，即可触发在父组件中定义的事件,indexSelect是自定义的
      }
    }

父组件

添加ref，名字自定义

<side-menu @indexSelect="listByCategory" ref="sideMenu"></side-menu>
<word-card class="card-area" ref="wordCard"></word-card>

最终调用父组件里的方法

 methods: {
      listByCategory() {
        var _this = this
        var cid = this.$refs.sideMenu.cid
        var url ='categories/' + cid + '/words'
        this.$axios.get(url).then(resp =>{
          if (resp && resp.status === 200) {
            _this.$refs.wordCard.words = resp.data
          }
        })
      }
    }