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