自定義事件$emit

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="myapp">
        <!-- 執(zhí)行自定義方法 -->
        <child v-on:inc="gincream"></child>
        {{total}}
    </div>
</body>
<script type="text/javascript">


var child = {
    template:'<button v-on:click="incream">+1</button>',
    methods:{
        incream:function(){
            this.$emit('inc');//事件的觸發(fā)
        }
    }
}

var app = new Vue({
    el:"#myapp",
    data:{
        msg:'welcome1',
        age:15,
        total:0

    },
    methods:{
        //父組件執(zhí)行的真正業(yè)務(wù)
        gincream:function(){
            this.total++;
        }
    },
    components:{
        child,
    }, 
})
</script>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容