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

undefined
  • 1.5k

比如这个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中的方法做过渡。

回复
阅读 250
2 个回答

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...

此问题简单来描述的话,就是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

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

你知道吗?

宣传栏