父组件监听子组件事件

文章目录

• 过程
• 监听子组件事件
• 配合额外参数使用$emit

---

过程

过程分为两步：

1.子组件通过$emit()方法发出自定义事件，$emit()方法语法为：

$emit(eventName,[arg1,arg2,arg3,…])

其中eventName为事件名称，arg1、arg2、arg3等为可选的额外参数；

2.父组件在其模版通过v:on指令（简写为@）监听自定义组件

一、监听子组件事件

定义了组件"counter"，它由<button>按钮组成,点击按钮会发出自定义事件"counter-add"。在根组件范围内，使用了该组件，因而可以在<counter>标签上可以通过v-on指令（指@）监听到"cpunter-add"事件，并在时间处理程序中对数据num进行自增。

<div id="app">
    <h2>当前计数器的值：{{num}}</h2>
    <counter v-on:counter-add="num++"></counter>
    <p>{{msg}}</p>
</div>

Vue.component('counter',{
    template:'<button @click="add">计数器</button>',
    methods:{
        add:function(){
            this.$emit('counter-add')
        }
    }
})

二、配合额外参数使用$emit

当点击给出建议按钮时，会从子组件内部arr数组中随机选取一项，在发出advice事件的同时将数据传给事件处理程序

<div id="app">
    <div calss="'outer">今天天气好，我准备
        <div class="inner">{{activity}}</div>
    </div>
    <advice @advice=""receiveAdvice></advice>
 </div>

Vue.component('advice',{
    data(){
        return{
            arr:['吃','喝','玩','乐']
    }
        },
    template:'<button @click="giveAdvice">给出建议</button>',
    methods:{
         giveAdvice:function(){
             let msg=this.arr[Math.floor(Math.random()*this.arr.length)]
             this.$emit('advice',msg)
         }
     }
 })

 

---