子组件可以使用 $emit 触发父组件的自定义事件。
子组件:
<template>
<div class="train-city">
<button @click='select()'></button>
</template>
<script>
export default {
props:['sendData'], // 用来接收父组件传给子组件的数据
methods:{
select(val) {
this.$emit('change',1);//select事件触发后,自动触发父组件change事件
}
}
}
</script>
父组件:
<template>
<div>
<div>父组件的toCity{{toCity}}</div>
<aa @change="update" :sendData="name"></aa>
</div>
<template>
<script>
import aa from "./aa.vue";
export default {
data () {
return {
name:"北京"
}
},
methods:{
update(data){//触发子组件
this.name = data.name;//改变了父组件的值
}
}
}
</script>
.sync修饰符
通过与$emit联合使用,子组件可以修改父组件中用.sync修饰的值
父组件:
<comp :myMessage.sync="bar"></comp>
子组件:
this.$emit('update:myMessage',valc);