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

vue子組件的自定義事件