uniapp - sync关键字

.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>