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修饰符