在vue2中:
我们通常使用this.$refs.childNode.clickButton()调用子组件方法。
子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法
1. 子组件中的方法mychild
show() {
console.log('子组件的show方法被调用了')
},
2. 父组件
<template>
<my-child ref="getRef" type="submit" />
</template>
<script>
getChild(){
console.log('父组件的getChild被调用了')
this.$refs.uploadRef.show();
},
</script>
此时就可以看到信息
vue3中
1.父组件
<template>
<div class="parent">
<button @click="getChild">触发子组件方法</button>
<!-- 1. 定义ref -->
<child ref="childRef"></child>
</div>
</template>
<script lang="ts" stup>
import { defineComponent, ref } from "vue";
import child from "@/components/child.vue";
// 2. 定义与ref同名变量
const childRef = ref<any>();
const getChild = () => {
childRef.value.childFun();
}
</script>
2.1 子组件 scrip setup 写法
其实和vue2差不多,最重要一点就是要在子组件中将父组件需要调用的方法,使用
defineExpose({myfunc})
进行导出,才能调用,不然会报错.
<template>
<div class="child">
</div>
</template>
<script lang="ts" stup>
const childFun = () => {
console.log('已触发组件方法');
}
//关键点 把 方法暴露给父组件
defineExpose({open})
</script>
2.2子组件 defineComponent 写法
<template>
<div class="child">
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
// 子组件的方法
const childFun = () => {
console.log('已触发组件方法');
}
return {
childFun
};
},
});
</script>
评论区