子组件不能直接改变props中的值，通常通过$emit进行自定义事件，通知父组件进行修改。在vue2.3.0中引入了语法糖.sync，可以在子组件中同步修改。

通过下面的例子了解sync的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 子组件 test-comp
<div v-if="visible">
	...
</div>

<script>
  ...
  props:{
			visible:{
				type:Boolean,
				default:true,
			},
  }
  ...
  changeVisible(){
    this.$emit('update:visible',false)
  }
</script>

子组件中通过this.$emit('update:visible',false) ，将visible的值改为false

在引入子组件的时候，自定义属性 visible 后面加入修饰符.sync

1
2
//父组件中
<test-comp :visible.sync="true" />

Vue3中用v-model替代了.sync修饰符

1
<test-comp v-model:visible="true" />