场景
希望在点击页面上的某个 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){...}
这个场景应该有更简单的实现方法, 说白了就是调用子组件的函数.
标签：Vue,函数,ttable,value,调用,组件,ref,getStatistic From： https://www.cnblogs.com/livebz/p/17382724.html