Vue2.3.0自定义事件的.sync修饰符

315 阅读1分钟

.sync

.sync可以实现子组件同步修改父组件的值

1.父组件通过 属性.sync可以对子组件进行传值操作 2.子组件通过props可以对父组件的值进行接收 3.子组件可以通过 this.$emit 对父组件的值进行 update:属性

父组件
<template>
  <div class="app">
     {{arrList}}
    <hr>
    <Child :money.sync="arrList"/>
    // <Child :money="arrList" v-on:update:money="arrList= $event"/>  //两句作用等同
  </div>
</template>
 
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { arrList: 10000 };
  },
  components: { Child }
};
</script>
子组件
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    </button>
  </div>
</template>
 
<script>
export default {
  props: ["money"]
};
</script>