父組件
<template>
<main>
<TheWelcome :msg="1" @change="ischange" ref="childRef" />
</main>
</template>
<script setup lang="ts">
import { getCurrentInstance } from "@vue/runtime-core";
import TheWelcome from "../components/TheWelcome.vue";
import { ref, onMounted } from "vue";
const ischange = (e: string) => {
console.log('子組件調(diào)用-emit');
};
const { proxy } = getCurrentInstance();
const iSref = getCurrentInstance();
let childRef = ref();
onMounted(() => {
//調(diào)用子組件的方式（類似Vue2的 this.$ref）
proxy.$refs.childRef.getList()
iSref.ctx.$refs.childRef.getList()
childRef.value.getList()
});
</script>
子組件
<script setup lang="ts">
// 接收到的父組件傳遞過來的數(shù)據(jù)
const props = defineProps({
msg: [String, Boolean, Number],
bar: Number,
});
console.log(props,'父組件傳過來的參數(shù)')
const emit = defineEmits(["change", "update"]);// $emit 暴露可調(diào)用的方法
const change = (e: string) => {
emit("change", e);
};
const getList = async () => {
console.log("父組件調(diào)用");
};
// 暴露給父組件調(diào)用
defineExpose({
getList
})
</script>
