vue子組件的自定義事件


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM