vue中sync的使用

Bertha 。 2022-09-06 14:23 55阅读 0赞

vue2.3.x:  
![image-20210820191415150][]

以上是**vue2.3.x**时`sync`的用法,其实在平常的工作中我用到sync最多的场景一般是父子组件之间控制的`dialog`弹框的显示隐藏,其实看一下UI库的文档,比如element-ui的`Dialog`组件,它是支持sync属性

![image-20210820191647574][]

比如我们有一个`list.vue`

<template>
    	<div>
            <button @click="add">新增</button>
        	<a-dialog :visible.sync="visible"></a-dialog>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            visible: false
        },
        methods: {
            add() {
                this.visible = true
            }
        }
    }
    </script>

子组件`a-dialog.vue`

<template>
    	<div v-if="visible">
            我是一个弹框
            <button @click="close">关闭弹框</button>
        </div>
    </template>
    
    <script>
    export default {
        props: {
            visible: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            close() {
                // 这个时候就可以在子组件通过下面的方式直接修改visible的值,因为props里面的属性,子组件是无法修改的,如果要修改我们可以通过自定义的事件的方式在父组件修改或者通过一些$parent 或者注入的方式等
                this.$emit('update:visible', false)
            }
        }
    }
    </script>

--------------------

下面是vue3.x关于`sync`的用法(其实已经没有sync这个属性了)

![image-20210820192310617][]

具体到我们实际的使用场景如下:

![image-20210820192412595][]

通过`v-model`的形式使用sync,在vue2.x的时候是使用`v-bind`的形式

然后在子组件的使用跟之前类似,只不过要注意组合式api跟其他方式的区别

如`组合式api`

![image-20210820192620404][]

注意: 2.x跟3.x最主要的区别就是

*  2.x使用时是`v-bind:visible.sync="visible"`或简写`:visible.sync="visible"`
 *  3.x使用时是`v-model:visible="visible"`
 *  然后就是主要在vue3.x中如果使用**setup**时的写法

[image-20210820191415150]: /images/20220829/1f2443edcd574a64990d2d3c42d574c4.png
[image-20210820191647574]: /images/20220829/20358395ab664d11b1e04f5c7e3ae42f.png
[image-20210820192310617]: /images/20220829/fff1d927fc6f4c6c81a329d8d472fcd8.png
[image-20210820192412595]: /images/20220829/53fe1827b50a40e3909394e7e9391ffd.png
[image-20210820192620404]: /images/20220829/4ccec219895b4a1b9c9384f42f0fe66a.png