为什么在我的Vue应用程序的Parent中未定义子级返回

Question

我正在构建一个Vue应用程序。在我的子组件中，我有一个函数，比如getName((，我会返回name，但当我试图在父组件中访问这个函数时，我无法使用它，因为它没有定义。但当我在父对象中发射名称并使用发射对象时，它就起作用了。有人知道我为什么面临这个问题吗。家长.vue

export default defineComponent({
name: 'App',
components: {
HelloWorld
},
mixins: [HelloWorld],
data() : { let value !: string return { value} }
methods: {
fetchval(){
let x = this.value.getVal();
console.log(x);
}
}
});
</script>

Child.vue

export default defineComponent({
name: 'HelloWorld',
dat(){
let val!: string;
return{
val,
}
},
computed: {
value: {
get() {
return this.val as string;
},
set(newval) {
val = newval;
}
}
},
methods: {
getVal(){
return this.value as string;
}
}
});
</script>

当我尝试console.log x时，我得到了未定义，但当我发出this.value并在父级中使用它时，工作正常。我错过了什么？

Answer 1

；fetchval"；方法不是引用您的孩子，而是引用"；值"；属性"这个"；指的是父组件。基本上，你试图称一个"；getVal"；函数。

如果要在子组件上调用函数，则需要对子组件的引用，并在该引用上调用该函数。您需要向子组件添加一个ref。如果你不熟悉参考，我建议从这里开始：模板参考