vue click事件传参数_深入理解 Vue 的 .sync 修饰符

Vue 中在某些情况下需要用到数据的双向绑定，但如果实现真正的双向数据绑定会给代码维护带来一定的困难，会引起父子组件都以更改数据容易混乱

Vue 使用 `update:myPropName` 的模式触发事件取而代之

基础例子

Child.vue

<template>
  <div class="child">
    {{childNumber}}
    <button @click="$emit('update:childNumber', childNumber + 1 )"> 
    // 子组件触发了 update:childNumber 事件
    <span>我要+1</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["childNumber"] // 给父组件传一个外部属性 childNunmber
};
</script>

<style>
.child {
  border: 3px solid green;
}
</style>

App.vue

<template>
  <div class="app">
    我是父组件 我现在也要 {{parentNumber}}
    <hr>
    <Child :childNumber="parentNumber" v-on:update:childNumber="parentNumber = $event"/> 
    // 父组件监听了 update:childNumber 事件
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { parentNumber: 0 };
  },
  components: { Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

<Child :childNumber="parentNumber" v-on:update:childNumber="parentNumber = $event"/> 这行代码太长了，所以 Vue 发明了一种修饰符 .sync 可以封装监听事件的操作

可以改为 <Child :childNumber.sync="parentNumber" />，本质来说其实 .sync 是一个 语法糖

$event 保存了 $emit 的参数（childNumber + 1）

本文正在参加“写编程博客瓜分千元现金”活动，关注公众号“饥人谷”回复“编程博客”参与活动。