在Vue.js 3中安装时，有什么方法可以从父组件访问子方法？

问题描述

您能教我在VueJS中安装时如何从父组件访问子函数吗？

我已经附上了示例代码，以使此问题更清楚。

P.S。 我已将子组件和一些代码添加到父组件。 您可以在下面看到代码。

<template>
  <div>Child</div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";

export default defineComponent({
  name: "Child",setup() {
    const childFunc = () => {
      console.log('This is Child.');
    };
  
    return {
      childFunc
    }
  }
});
</script>

<script lang="ts">
import { defineComponent,ref,onMounted } from "@vue/composition-api";
import Child from "./Child.vue";

export default defineComponent({
  name: "Parent",components: {
    Child
  },setup() {
    const child = ref();

    onMounted(() => {
      child.value.childFunc(); // Error: childFunc of undefined 
    });

    return {
      child
    };
  },});
</script>

<template>
  <Child ref="child" />
</template>

解决方法

它应该工作，在下面的示例中，我创建了一个带有按钮的子组件，该组件增加了一个计数，已安装的计数由父级增加了一个：

const {
  createApp,ref,onMounted,defineComponent
} = Vue

let Child = defineComponent({
  name: "Child",setup() {
    const childFunc = () => {
      console.log('This is Child.');
    };
  
    return {
      childFunc
    }
  },data() {
    return {
      count: 0
    }
  },methods: {
    increment() {
      this.count++;
    }
  },template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})
let app = createApp({
  el: '#app',setup() {
    const child = ref();

    onMounted(() => {
 child.value.childFunc(); 
      child.value.increment()
    });

    return {
      child
    };
  },components: {
    Child
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

<div id="app">
  test
  <Child ref="child" />
</div>

,

我不得不问：您确定要这样做吗？函数只是一个哑函数，不是反应性的。您如何设想组件之间的分离？当Vue组件与商店交互时，它们的工作效果最佳，因此它们之间的链接最少。父子关系仅指DOM放置，它可能会随着时间而变化。 ref是您应该问自己“我真的需要这样做吗？”的功能之一。