官方連結

• 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>