先用一个案例引出.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>