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

Question

你能教我在 VueJS 中挂载时如何从父组件访问子函数吗？

我已附上示例代码以明确此问题。

附： 我已将子组件和一些代码添加到父组件。 你可以看到下面的代码。

<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>

Answer 1

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

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>

Answer 2

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