Vue组件如何集成子组件的方法?

Question

比如这个Test组件:

<template>
  <div>
     <el-table ref="table" v-bind="$attrs"/>
  </div>
</template>

现在另一个组件Faker.vue引用了Test组件, 现在想调用Test中的el-table的方法需要这么调用

this.$refs.test.$refs.table.setCurrentRow()

如何做到

this.$refs.test.setCurrentRow()

这样调用?

当然了在我并不想在Test中硬写el-table中的方法做过渡。

Answer 1

Test.vue

<template>
  <div>
     <el-table ref="table" v-bind="$attrs"/>
  </div>
</template>

<script>
export default {
  mounted() {
     Object.assign(this, this.$refs.table)
  }
}
</script>

父组件

this.$refs.test.setCurrentRow()

参考代码
https://codesandbox.io/s/craz...

Answer 2

此问题简单来描述的话，就是Vue里面的跨组件通讯。解决方式比较多，列举几种常用的

• busEvent

// 监听`eventName`事件
bus.$on("eventName",(params)=>{
  // todo something
})
// 销毁`eventName`广播
bus.$off("eventName")
// 执行广播
bus.$emit("eventName",params)

• 传统通讯

  • html

  <child-node
   @change="getDataInfo"
  >
  </child-node>

  • javascript

  this.$emit("change",params)
  
  methods:{
  getDataInfo(params){
    // to do something
  }
  }

• 构造器 & Provide & Inject

  在顶级入口，挂载构造器，然后Provide提供出去，在子级&孙级 Inject接收，调用即可

• $refs

...更多自行百度或者谷歌