$emit使用

在vue中,父组件可以比较容易地传递数据给子组件,而如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.

子组件

<template>
    <div @click="clickThis"></div>
</template>

methods: {
    clickThis() {
      // 此处的cli是父组件调用子组件时监听的事件,不是父组件在methods 定义的方法,更不是子组件自己定义的方法
      this.$emit('cli','hehe'); //主动触发cli方法,'hehe'为向父组件传递的数据
    }
}

父组件

<div>
    <child @cli="change" :msg="msg"></child> //监听子组件触发的cli事件,然后调用change方法
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}