父子組件的信息傳遞無礙就是父組件給子組件傳值(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來觸發自定義事件(不需要注冊),並且傳值出去

