vue3触发父组件两种写法
作者：007。
这篇文章主要介绍了vue3触发父组件两种写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3触发父组件两种写法
1、正常写法
子组件：
import { defineComponent } from 'vue';
export default defineComponent({
emits: ["testEmi"],
setup(props, context) {
const changeCollapse = () => {
//触发父组件事件
context.emit("testEmi")
}
return {
testEmi
}
}
})父组件：
<test @testEmit="testEmi" />
2、 语法糖写法
子组件：
const emit = defineEmits(["downloadTemp"]);
const downloadTemp = () => {
emit("downloadTemp", "12");
};父组件：
<UpDownload @downloadTemp="downloadTempSms"/>
在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits
补充：vue子组件调用父组件的3种方法，超实用
1. 直接在子组件中通过this.$parent.event来调用父组件的方法
父组件：
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>子组件：
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};2. 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
父组件：
<template>
<div>
<child @fMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod(data) {
console.log(data);
}
}
};
</script>子组件：
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fMethod',data);
}
}
};
</script>3. 父组件把方法传入子组件中，在子组件里直接调用
父组件：
<template>
<div>
<child :fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>子组件：
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
</script>到此这篇关于vue3触发父组件两种写法的文章就介绍到这了,更多相关vue3触发父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！