vue 使用ref方式父组件无法触发子组件方法

原文链接：vue 使用ref方式父组件无法触发子组件方法 – 每天进步一点点

0.背景

改个小功能，定义了一个子组件：

<template>

<div>

 

</div>

</template>

 

<script>

 

export default {

name: "SyncGroupList",

props: {

// 班级/团队id

gid: {

type: Number,

default: null,

},

},

data() {

return {

 

};

},

methods: {

// 获取所有题单列表

getTrainingList() {

console.log("getTrainingList");

},

},

};

</script>

想通过父组件引入子组件，然后触发子组件的方法。

父组件定义参考如下：

<template>

<div>

<el-button @click="handleTrainingToGroup"></el-button>

 

<el-dialog

:title="弹窗"

width="850px"

:visible.sync="groupListPage"

:close-on-click-modal="false"

>

<SyncGroupList ref="SyncGroupListChild"> </SyncGroupList>

</el-dialog>

</div>

</template>

 

<script>

 

export default {

name: "GroupTrainingList",

data() {

return {

 

};

},

methods: {

handleTrainingToGroup() {

console.log("公共训练同步至班级");

this.groupListPage = true;

this.$refs.SyncGroupListChild.getTrainingList();

},

},

};

</script>

如果像上面那样定义，首次加载就会报错：

vue.min.js:6 TypeError: Cannot read properties of undefined (reading ‘getTrainingList’)

第二次打开就正常了。

去查了一下原因：

“关于ref注册时间的重要说明：因为ref本身作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定”。

意思是：你用上面的方法创建子组件后，不能立即访问里面的方法。

解决办法，我们可以加个定时。比如下面这样：

handleTrainingToGroup() {

console.log("公共训练同步至班级");

this.groupListPage = true;

setTimeout(() => {

this.$refs.SyncGroupListChild.getTrainingList();

});

},

这样就不会报错了。

当然，父组件触发子组件中的方法不止一种，也可以使用别的方法。