1. 组件事件定义
父组件
<template>
<div>count值为:{{count}}</div>
<div>
<!--定义一个自定义事件名称为addcount
v-on绑定的事件为functionaddcount-->
<classtest :title="title" @自定义事件名称="需要绑定到自定义事件的方法" @自定义事件名称1="需要绑定到自定义事件的方法2"...... />
</div>
</template>
<script setup>
import { ref } from "vue";
import classtest from "./components/classtest.vue";
let count = ref(1);
let title=ref('点击count++')
function 方法名称需绑定到自定义事件(参数1,参数2,....){
本组件的响应式变量操作
}
</script>
<style scoped>
</style>
子组件(使用 <script setup>
)
<template>
<div class="blog-post">
<h4>{{ title }}</h4>
<!--使用$emit直接调用父组件的addcount方法-->
<button @click="$emit(父组件自定义事件名称)">Enlarge text</button>
<!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
<button @click="此组件自定义方法">Enlarge text</button>
</div>
</template>
<script setup>
defineProps(['title'])
//返回一个等同于 $emit 方法的 emit 函数
let emit = defineEmits([父组件的自定义事件名称1,父组件的自定义事件名称2,....])
//此方法执行父组件俩个方法,
//如想执行一个单独写一个emit就可以
function 方法名称(){
emit(父组件的自定义事件名称,参数1,参数2,....)
emit(父组件的自定义事件名称,参数1,参数2,....)
....
}
</script>
<style>
</style>
子组件(未使用 <script setup>
)
<template>
<div class="blog-post">
<h4>{{ title }}</h4>
<!--使用$emit直接调用父组件的addcount方法-->
<button @click="$emit(父组件的自定义事件名称)">Enlarge text</button>
<!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
<button @click="此组件定义的方法">Enlarge text</button>
</div>
</template>
<script>
export default {
props:['title'],
//使用emits接收父组件的自定义事件
emits:[父组件自定义事件名称1,父组件自定义事件名称2,.....],
//将接收到的自定义事件\自定义属性传入setup
//第一个参数为props(自定义属性)
//第二个参数为cxt(自定义事件)
setup(自定义属性,自定义事件) {
function 被此组件调用的方法名称(){
ctx.emit(父组件自定义事件名称1,参数1,参数2,....)
ctx.emit(父组件自定义事件名称2,参数1,参数2,....)
......
}
return{
被此组件调用的方法名称
}
}
}
</script>
<style>
</style>
2. 组件事件实例
父组件
<template>
<div>count值为:{{count}}</div>
<div>
<!--定义一个自定义事件名称为addcount
v-on绑定的事件为functionaddcount-->
<classtest :title="title" @addcount="functionaddcount" @addcount1="functionaddcount" />
</div>
</template>
<script setup>
import { ref } from "vue";
import classtest from "./components/classtest.vue";
let count = ref(1);
let title=ref('点击count++')
//定义一个方法count++,传入自定义事件@addcount中
//因为要被子控件调用
function functionaddcount(e,a){
console.log('我被子控件classtest的click事件执行了')
console.log(e)
count.value += e += a
}
</script>
<style scoped>
</style>
子组件(使用 <script setup>
)
<template>
<div class="blog-post">
<h4>{{ title }}</h4>
<!--使用$emit直接调用父组件的addcount方法-->
<button @click="$emit('addcount')">Enlarge text</button>
<!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
<button @click="clickaddcount">Enlarge text</button>
</div>
</template>
<script setup>
defineProps(['title'])
//返回一个等同于 $emit 方法的 emit 函数
let emit = defineEmits(['addcount','addcount1'])
//此方法执行父组件俩个方法,
//如想执行一个单独写一个emit就可以
function clickaddcount(){
emit('addcount',5,1)
emit('addcount1',5,1)
}
</script>
<style>
</style>
子组件(未使用 <script setup>
)
<template>
<div class="blog-post">
<h4>{{ title }}</h4>
<!--使用$emit直接调用父组件的addcount方法-->
<button @click="$emit('addcount')">Enlarge text</button>
<!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
<button @click="clickaddcount">Enlarge text</button>
</div>
</template>
<script>
export default {
props:['title'],
//使用emits接收父组件的自定义事件
emits:['addcount','addcount1'],
//将接收到的自定义事件\自定义属性传入setup
//第一个参数为props(自定义属性)
//第二个参数为cxt(自定义事件)
setup(props,ctx) {
function clickaddcount(){
//需要执行的父组件中的自定义事件的值(即父组件中定义的方法)
ctx.emit('addcount',5,1)
ctx.emit('addcount1',5,1)
}
return{
clickaddcount
}
}
}
</script>
<style>
</style>
3. 事件验证(没搞懂)
<script setup>
const emit = defineEmits({
// 没有校验
click: null,
// 校验 submit 事件
submit: ({ email, password }) => {
if (email && password) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
})
function submitForm(email, password) {
emit('submit', { email, password })
}
</script>