vue子组件的自定义事件

时间:2022-10-17 22:02:56

父子组件的信息传递无碍就是父组件给子组件传值props和$attrs)和父组件触发子组件的事件($emit)

之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧~~

实际上挺简单:

父组件:

<template>
<div>
<my-child abcClick="sayHello"></my-child>
</div>
</template>

<script>
export
default {
method: {
sayHello(Num,Str) {
alert(
'hello world~~' + Num + Str)
}
}
}
</script>

子组件:

<template>
<div>
<!--例如最简单的封装一个按钮-->
<button @click="childClick"></button>
</div>
</template>

<script>
export
default {
data: {
return{
myNum:
456,
myStr:
'haha'
}
},
method: {
childClick() {
this.$emit('abcClick', this.myNum, this.myStr)
}
}
}
</script>

核心就是通过$emit来触发自定义事件(不需要注册),并且传值出去