.sync修饰字在vue1.0作为双向数据绑定而存在，在2.0时被砍掉。而后在2.3被当做语法糖加入 （vue单向绑定数据流通）
假设一个需求是：父组件值传入到子组件，然后子组件更改后父组件的值也得更改
1. 通过props传值，data赋值的操作实现（避免出现双向数据绑定错误）
index.vue
<template>
<view class="content">
<onA :number.sync="num"></onA>
父组件：{{num}}
</view>
</template>
<script>
import onA from '@/components/onA.vue';
export default {
data() {
return {
num: 10
}
},
components: {
onA
},
onLoad() {},
mounted() {
},
methods: {
}
}
</script>
<style>
.title {
color: #007AFF;
}
</style>
onA.vue
<template>
<view @click="fn">
子组件：
{{numberCache}}
</view>
</template>
<script>
export default {
data() {
return {
numberCache: null
}
},
props: ['number'],
created() {
this.numberCache = this.number;
},
methods: {
fn() {
// 这里处理它就好
this.numberCache++;
this.$emit('update:number', this.numberCache);
}
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.title {
color: #F0AD4E;
}
</style>
我们也可以利用子组件this.$emit传值再赋值的形式去更新父组件的值.
2. 如果不想引起双向数据绑定报错可以通过ref标识向子组件赋值
index.vue（父组件）
<template>
<view class="content">
<onA :number.sync="num" ref="on"></onA>
父组件：{{num}}
</view>
</template>
<script>
import onA from '@/components/onA.vue';
export default {
data() {
return {
num: 10
}
},
components: {
onA
},
onLoad() {},
mounted() {
this.$refs.on._data.number = this.num;
},
methods: {}
}
</script>
<style>
.title {
color: #007AFF;
}
</style>
onA.vue
<template>
<view @click="fn">
子组件：
{{number}}
</view>
</template>
<script>
export default {
data() {
return {
number: null
}
},
methods: {
fn() {
this.number++;
this.$emit('update:number', this.number);
}
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.title {
color: #F0AD4E;
}
</style>