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