Vue "引用式"调用组件内函数

场景

希望在点击页面上的某个 button 时, 刷新某个组件的内容.

组件内容刷新函数 getStatistic() 在组件<Table/>内, 当点击 "统计" 按钮时, 页面 Block 切换至统计页面, 同时调用对应组件中的 getStatistic() 函数, 更新数据.

解决方案

// 创建一个 ref 对象, 接受 <Table/> 组件
const ttable = ref(null)

// "统计"按钮的 onclick 函数
const switchToStatic = () => {
  state.showBlock = 3
  if(ttable.value){
    ttable.value.getStatistic();
  }
}

<div v-if="state.showBlock == 3">
  <Table ref="ttable"/>
</div>

ref 是一个内置的特殊 Attributes , 用于注册元素或子组件的引用。获取组件引用后, 就可以使用组件暴露出来的方法.

使用选项式 API，引用将被注册在组件的 this.$refs 对象里：

因为 ref 本身是作为渲染函数的结果来创建的，必须等待组件挂载后才能对它进行访问。所以判断 if(ttable.value){...}

这个场景应该有更简单的实现方法, 说白了就是调用子组件的函数.