vue3.0父组件调用子组件里的方法

这是父组件

<template>
  <div class="mt-5">
    <Son ref="RefChilde"></Son>
    <div class="btn btn-primary my-2" @click="fnCallChild">
      点我调用Son组件里的方法
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Son from "../components/Son.vue";

export default defineComponent({
  name: "father",
  components: { Son },
  setup() {
    const RefChilde = ref();     //RefChilde 要和Son组件上的class名相同
    const fnCallChild = () => {
      RefChilde.value.sonFn();      //sonFn是子组件里的方法
    };
    return { RefChilde, fnCallChild };
  },
});
</script>

这是子组件

<template>
  <div>
    <h1>{{ conts }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const conts = ref("我是子组件");
    const sonFn = () => {
      conts.value = "我被父组件里调用了子组件的方法修改了数据";
    };
    return { conts, sonFn };
  },
});
</script>

调用前：
调用后：
最后推荐一个前端开发好用的导航网站：www.888i8.cn