Vue中的.sync修饰符

2021-12-07 172 阅读1分钟

解决父子双向传值的问题

.sync修饰符常常出现于父子组件通信中，比如父向子传完值，子组件利用props接收传进来的值，相当于把它放在了data选项里面了，可以直接this.xxx来使用。
但是问题来了，有时候传进来的值我们需要进行修改，直接修改props里的值不会报错，但是会报警告，这种警告就是单向数据流，单向数据流不提倡直接修改props。

那么，我们有两种方法可以来解决这个问题

利用emit自定义方法

// Father.vue
<template>
    // 自定义属性msg， 自定义方法change，接收参数
    <Son :msg="msg" @change="val => msg = val" />
</template>

<script>
import Son from './Son.vue'
export default {
    components: { Son },
    data () {
        return {
            msg: '传送的数据'
        }
    }
}
</script>

// Son.vue
<template>
    <div>
        <h2>{{ msg }}</h2>
        <button @click="changeMsg">点我改变值</button>
    </div>
</template>

<script>
export default {
    props: ['msg']
    methods: {
        changeMsg () {
            // 这里会触发上面的自定义方法change，并传入一个参数
            this.$emit('change', '值改变了')
        }
    ]
}
</script>

利用.sync修饰符

这个方法会简单很多，不用写那么多代码了

// Father.vue
<template>
    // 自定义属性msg，注意多加了个.sync
    <Son :msg.sync="msg" />
</template>

<script>
import Son from './Son.vue'
export default {
    components: { Son },
    data () {
        return {
            msg: '传送的数据'
        }
    }
}
</script>


// Son.vue
<template>
    <div>
        <h2>{{ msg }}</h2>
        <button @click="changeMsg">点我改变值</button>
    </div>
</template>

<script>
export default {
    props: ['msg']
    methods: {
        changeMsg () {
            // 这里事件名改为了update:xxx ，xxx为props值，这里要相对应
            // 此时就完成了双向传值
            this.$emit('update:msg', '值改变了')
        }
    ]
}

.sync方便了父子组件间双向传值，不用在标签上写自定义事件了，要点就是update:xxx