$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;
}
}