Vue .sync修飾符使用

vue雙向綁定，但是在父子組件之間遵循單向原則，即子組件不要去改變父組件傳遞過來的值

示例：

子組件 child-dialog

<template>
  <div v-show=“show”>
 	子彈窗組件
 	<button @click="close">關閉</button>
  </div>
</template>
 <script>
  export default {
    name: 'dialog',
    props: {
        show: {
            // 控制顯示與否
            type: Boolean,
            default: false
        }
  },
  methods:{
	close(){
	   //關閉彈窗
    	this.show=false
    }	
  }

父：

<child-dialog :show="show"/>

如上在子組件中close方法直接show賦值false，那麼就是改變父組件的值。會給出警告：

解決方式：

一: $emit 、v-on

在data中實例化個變量接收prop。然後藉助子組件中$emit發送，父組件中v-on這種方式就不做介紹（不推薦使用，繁瑣）

二、使用sync去改變父組件變量參數：
官網傳送門

子組件

<template>
  <div v-show=“show”>
 	子彈窗組件
 	<button @click="close">關閉</button>
  </div>
</template>
 <script>
  export default {
    name: 'dialog',
    props: {
        show: {
            // 控制顯示與否
            type: Boolean,
            default: false
        }
  },
  methods:{
	close(){
	    //關閉彈窗，this.show=false去掉替換爲：
    	this.$emit('update:show',false)
    }	
  }

父：

<child-dialog :show.sync="show"/>

總結：

子組件直接使用

$emit("update:傳遞過來的參數字段",變更後的值)

父組件

傳遞的參數加上.sync修飾符