如何在Vue.js中访问父组件中的子组件

Question

我想访问父组件中的方法，并且该方法存在于子组件中。我试过用混合药。但是函数返回的是null而不是值。如果我试图发出对象，并且它在父组件中工作得很好。如何在vue3选项API中访问父类中的子方法？

Parent.vue

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  },
  mixins: [HelloWorld],
  methods: {
    fetchval(){
      let x = this.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>

Answer 1

也许最好重新考虑控制流，这样它就有了一个清晰的关注点。

• 父级不应直接访问子方法。如果应该通过单击按钮调用该方法，则子节点可以处理该单击并将事件发送回父callabck处理程序。有关详细信息，请参阅这
• 您也可以查看状态管理，它可以实现您想要的。链接博士

尽管如此，在父类中声明组件并将该组件包含在父级的混合器中似乎并不常见，也可能不是一个好的实践。

只是一个快速的答案，也许有更多的方法来实现你的愿望。