我要评论1. 基本知识
在 vue 3 中，emit 是一种机制，用于在子组件中触发事件，并在父组件中监听这些事件
提供一种组件间通信的方式，尤其是在处理父子组件数据传递和交互时非常有用
一共有两种方式
1.1 emit
子组件中使用emit
<template>
<button @click="handleclick">click me</button>
</template>
<script>
export default {
name: 'childcomponent',
methods: {
handleclick() {
this.$emit('custom-event', 'hello from child');
}
}
}
</script>
父组件监听子组件：
<template>
<div>
<childcomponent @custom-event="handlecustomevent" />
</div>
</template>
<script>
import childcomponent from './childcomponent.vue';
export default {
name: 'parentcomponent',
components: {
childcomponent
},
methods: {
handlecustomevent(payload) {
console.log(payload); // 输出 'hello from child'
}
}
}
</script>
1.2 defineemits
在 vue 3 中，还可以使用 composition api 的 defineemits 方法来定义和使用 emit
子组件中定义和使用emit：
<template>
<button @click="emitevent">click me</button>
</template>
<script setup>
import { defineemits } from 'vue';
const emit = defineemits(['custom-event']);
function emitevent() {
emit('custom-event', 'hello from child with composition api');
}
</script>
父组件监听子组件：
<template>
<div>
<childcomponent @custom-event="handlecustomevent" />
</div>
</template>
<script>
import childcomponent from './childcomponent.vue';
export default {
name: 'parentcomponent',
components: {
childcomponent
},
methods: {
handlecustomevent(payload) {
console.log(payload); // 输出 'hello from child with composition api'
}
}
}
</script>
2. demo
完整demo如下：
- 创建子组件：
<template>
<button @click="emitevent">click me</button>
</template>
<script setup>
import { defineemits } from 'vue';
const emit = defineemits(['custom-event']);
function emitevent() {
emit('custom-event', 'hello from child with composition api');
}
</script>
- 创建父组件：
<template>
<div>
<childcomponent @custom-event="handlecustomevent" />
<p>{{ message }}</p>
</div>
</template>
<script>
import childcomponent from './childcomponent.vue';
import { ref } from 'vue';
export default {
name: 'parentcomponent',
components: {
childcomponent
},
setup() {
const message = ref('');
function handlecustomevent(payload) {
message.value = payload;
}
return {
message,
handlecustomevent
};
}
}
</script>
- 应用组件：
<template>
<parentcomponent />
</template>
<script>
import parentcomponent from './components/parentcomponent.vue';
export default {
name: 'app',
components: {
parentcomponent
}
}
</script>
主入口文件：
import { createapp } from 'vue';
import app from './app.vue';
createapp(app).mount('#app');总结
到此这篇关于vue3中的emit用法(子传父)的文章就介绍到这了,更多相关vue3中emit用法内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论