VUE修饰符sync使用

对于VUE的初学者来讲，肯定会感觉prop的写法很麻烦，很讨厌！你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得！不过现实是残酷的，如果子组件可以任意修改父组件的内容，那势必会带来数据的混乱，从而造成维护的困扰！毕竟父组件也是有尊严的！

官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，

父组件代码

<template>
    <div>
        <input type="button" 
               value="我是父组件中的按钮" 
               @click="show">
        <child v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

子组件child代码

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
    </div>
</template>
1
2
3
4
5

接下来加个需求，在子组当中增加一个按钮，通过该按钮来将自已隐藏起来！需要借助父子之间的传值了！

父组件代码：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child @upIsShow="changeIsShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

子组件代码：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("upIsShow",false);
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果我要将父组件中的事@upIsShow修改为@update:isShow不违法吧：

<child @update:isShow="changeIsShow" v-show="isShow"/>

1
2

子组件的emit自然也要做对应调整：

upIsShow(){
    this.$emit("update:isShow",false);
}
1
2
3

运行一下，一切正常！真好！

那么如果现在我将父组件的changeIsShow直接写成匿名函数，也能运行吧：

<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>

1
2

再次运行，一切还是那么美好，真好！

现在我将那匿名函数改成箭头函数，不过分吧：

<child @update:isShow="bol=>isShow=bol" v-show="isShow"/>

1
2

运行一次，完美，真好！

最后我将上面那行代码做最后一次修改：

<child :isShow.sync="isShow" v-show="isShow"/>
1

至此终于涉及到了sync了。以上代码 :isShow.sync="isShow"其实是 @update:isShow="bol=>isShow=bol"语法糖。是其一种简写形式。附上完整代码。
父组件：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
           // changeIsShow(bol){
                // this.isShow=bol;
           // }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

子组件

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后：sync只是给大家伙提供了一种与父组件沟通的思路而已！所以在后面日子里，你如果只是单纯的在子组件当中修改父组件的某个数据时，建议使用sync，简单，快捷，有档次！真好！

在来一个案例：
父组件：

<template>
    <div>
        <Aninput :keyword.sync="keywords" placeholder="搜索扫描任务" @trigger-event="getlist"/>

    </div>
</template>
<script>
    import Aninput from "./Aninput"
    export default {
        data() {
            return {
                keywords:"",
            }
        },
        components:{
            Aninput
        },
        methods:{
            getlist(){
                console.log('调取接口')
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件：

<template>
  <div class="input-wrapper">
    <input v-model="_keyword"  :clearable="true" @keypress.enter="trigger">
  
  </div>
</template>
<script>


export default {
    data(){
        return{

        }
    },
    props:{
      keyword:{
        type: String,
        default:""
      }
    },
    computed:{
        _keyword:{
            get(){
               return  this.keyword
            },
            set(val){
                this.$emit('update:keyword', val)
            }
        }
    },
    methods:{
        trigger() {
            this.$emit('trigger-event')
            console.log('111')
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

原文链接：https://blog.csdn.net/z591102/article/details/105506866