vue3-自定义事件
作用
完成组件之间数据的传递、组件之间的通信
与vue2的区别
父组件中没有差别,子组件中触发方法,为setup中第二个入参context的emit方法
代码
- 父组件
<template>
<div>userName:{
{userName}}</div>
<div>userAge:{
{userAge}}</div>
<customEvent @event1="event1"></customEvent>
</template>
<script>
import {
ref
} from 'vue'
import customEvent from './index.vue'
export default {
components: {
customEvent
},
setup() {
let userName = ref('李四')
let userAge = ref(20)
function event1(name, age) {
userName.value = name
userAge.value = age
}
return {
userName,
userAge,
event1
}
}
}
</script>
<style>
</style>
- 子组件
<template>
<button @click="triggerEvent1">触发event1事件</button>
</template>
<script>
export default {
name: 'customEvent',
// context代表组件上下文对象
// context是setup的第二个参数
setup(props, context) {
function triggerEvent1() {
//触发事件event1,传递数据。
context.emit('event1', '张三', 50)
}
return {
triggerEvent1
}
}
}
</script>
涉及内容
vue3、组件通信