父组件:
<template>
<div>
<hello-world ref="s" :msg="obj.name"></hello-world> //子组件
<button @click="aa">按钮</button>
</div>
</template>
<script>
import { onMounted, ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld,
},
setup() {
let s = ref(null);//这里是获取子组件实例 (注意变量’s’ 要与 ref=’s’保持一致, 否则获取不到)
function aa() {
let a=s.value.ss();//调用子组件的方法
}
onMounted(() => { //如果是想进入页面就调用子组件的方法, 需写在 onMounted 生命周期函数中
console.log(s);
});
return {
aa,
s,
};
},
};
</script>
子组件:
<template>
<div>
<input v-model="msg" type="text" />
</div>
</template>
<script>
import { ref } from "@vue/reactivity";
export default {
props: {
msg: {},
},
setup(props,{ expose }) { //暴露自己的方法需用到 expose 方法
function ss() {
return props
}
expose({ //使用方法
ss,
});
return {
ss,
};
},
};
</script>
