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

父组件

<!-- 首页 -->
<template>
  <div style="border: 5px solid gray">
    
    <!-- 父组件调用子组件方法 -->
    <div>
      <button @click="getChildFun">父组件调用子组件方法</button>
    </div>

    <!-- 组件 -->
    <child
      ref="childRef"
    />
  </div>
</template>

<script>
import {
  onMounted,
  reactive,
  ref,
  defineComponent,
} from "vue";
import child from "./child.vue";
export default {
  components: { child },
  setup() {
    
    /* ------------------------------定义data ------------------------------*/
    const childRef = ref(null);
    let teststr = ref("阳光正好");
    const data = reactive({
      msg: "Hello World",
      count: 1,
      name: "name",
      username: ref("username"),
    });

    /* ------------------------------处理生命周期 ------------------------------*/
    onMounted(() => {
      console.log("组件初始化Mounted");
      console.log('组件初始化Mounted',childRef.value)
    });

    /* ------------------------------定义methods ---------------------------------*/
    const methods = {
      
      // 获取调用子组件方法
      getChildFun:()=>{
         childRef.value.getListFun();
      }
    };

    /* ------------------------------返回数据------------------------------ */
    return Object.assign(data, methods,{childRef});  //注意定义的方法和变量要return
  },
};
</script>

子组件

<!-- child -->
<template>
  <div style="border:2px solid blue">
      <div>子组件：</div>
  </div>
</template>

<script>
import {watchEffect,defineComponent} from 'vue';
export default {

  setup(props, context) {
    /* ------------------------------定义methods ---------------------------------*/
    const methods = {
      // 父组件调用方法
      getListFun:()=>{
        console.log('子组件方法执行')
        alert('子组件')
      },
    };
    return Object.assign(methods,{props});
  },
};
</script>