$emit
vm.$emit( eventName, […args] ) 用来触发当前实例上的事件,附加参数都会传给监听器回调。
多用于父子组件数据的传递。
参数
- eventName 事件名
- [...args] 传入的参数
$emit 相当于eventBus
代码示例：
Parent.vue
<template>
<div class=parent-border>
<div>父亲：{{totalMoney}}</div>
<-- undata:money事件执行将$event赋值给totalMoney -->
<Child :money="totalMoney" v-on:update:money="totalMoney = $event" />
</div>
</template>
<script>
import Child from "./Child";
export default {
components:{
Child
},
data(){
return {
totalMoney:10000
}
}
}
</script>
<style scoped>
.parent-border{
padding: 10px;
border: 2px solid blue;
}
</style>
父组件将钱的金额传入子组件并定义了update:money事件,事件执行会将传入的参数赋值给totalMoney。该事件需要由子组件来触发，以实现子组件与父组件中的金额同步变化。
Child.vue
<template>
<div class="border">
<div>儿子：{{money}}</div>
<button @click="$emit('update:money', money-100)">
<span>儿子花钱</span>
</button>
</div>
</template>
<script>
export default {
props:['money'],
methods:{
getData(){
return Date.parse
}
}
}
</script>
<style scoped>
.border{
padding: 10px;
border:2px solid red;
}
</style>
在子组件中使用$emit定义update:money事件，每次点击按钮就减100。以实现子组件和父组件中的通信。
难道每次子组件要修改父组件传进来的值都需要使用
:money="totalMoney" v-on:update:money="totalMoney = $event"这么长一段代码啦实现同步数据吗
sync
vue为父子组件信息同步专门提供了sync修饰符，在向子组件传递参数时，可以使用:money.sync来表示传入子组件的参数需要与父组件同步。从而达到替代:money="totalMoney" v-on:update:money="totalMoney = $event"这一大段代码的效果。
在上面的父子组件同步money的代码中只需要将
<Child :money="totalMoney" v-on:update:money="totalMoney = $event" />
修改为
<Child :money.sync="totalMoney" />
即可实现同步的效果。
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。
总结
.sync修饰符其实就是 :money="totalMoney" v-on:update:money="totalMoney = $event"的语法糖
