Vue中的.sync的应用💠

官方链接

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符
这个解释有点不太直观，用代码解释一下：

父组件 v-bind:msg.sync="testMsg"

<template>
  <div>
    <bizComponent v-bind:msg.sync="testMsg"></bizComponent>
  </div>
</template>
<script>
import bizComponent from './bizComponent'
export default {
  components:{bizComponent
  }
  data: function () {
    return {
      testMsg: 'Hello origin testMsg'
    };
  }
}
</script>

子组件: 子组件可以在任意methods或者生命周期中直接修改props的值.

第一个参数形式 [update:propName]. 这是Vue的机制
第二个参数内容: 修改后内容传回父组件
这种形式不需要在父组件中实现赋值方法
this.$emit('update:msg', 'Hello Changed message')

<template>
  <div>
    <div class="box-later-1">prop msg is: {{msg}}</div>
    <el-button type="danger" v-on:click="handleClick">change</el-button>
  </div>
</template>
<script>
export default {
  props: {
    msg: {type: String}
  },
  data: function () {
    return {};
  },
  methods: {
    handleClick() {
      // 第一个参数形式 [update:propName]. 这是Vue的机制
      // 第二个参数内容: 修改后内容传回父组件
      // 这种形式不需要在父组件中实现赋值方法
      this.$emit('update:msg', 'Hello Changed message')
    }
  },
}
</script>