【翻译一下官方文档】之uniapp的.sync修饰符

先用一个案例引出.sync修饰符

就是这样一个场景

 父组件直接修改状态A当然没问题，但是子组件不能直接修改状态A，因为单向数据流限制

单向数据流

uni-app官网

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

【翻译一下官方文档】就是说为了方便管理，子不能改父传下来的数据

原生做法

为了解决这个问题

我们原始的解决办法是

子组件发出一个事件，这个事件带一个参数，父组件接收这个事件和参数，再去改变状态

上代码：

 

 这样写可以达成目的，但是比较累

过度写法

这是过度一下

就是从原始写法到.sync的过度

 

 

 

 .sync修饰符

此时父组件的自定义事件也不需要了

 

 看看文档

uni-app官网

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

【翻译一下官方文档】意思就是上面说的那种情况可以了，可以子改变父了

看看官网例子

	<!-- 父组件 -->
	<template>
		<view>
			<syncA :title.sync="title"></syncA>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					title:"hello vue.js"
				}
			}
		}
	</script>

	<!-- 子组件 -->
	<template>
		<view>
			<view @click="changeTitle">{{title}}</view>
		</view>
	</template>
	<script>
		export default {
			props: {
				title: {
					default: "hello"
				},
			},
			methods:{
				changeTitle(){
					//触发一个更新事件
					this.$emit('update:title',"uni-app")
				}
			}
		}
	</script>