如何理解.sync修饰符

最新推荐文章于 2022-08-05 23:18:48 发布

qq_31205113

最新推荐文章于 2022-08-05 23:18:48 发布

阅读量214

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_31205113/article/details/105473243

版权

js 专栏收录该内容

6 篇文章

订阅专栏

案例

<div id="app">
    <div>{{bar}}</div>
    <my-comp :foo.sync="bar"></my-comp>
    <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
    Vue.component('my-comp', {
        template: '<div @click="increment">点我+1</div>',
        data: function() {
            return {copyFoo: this.foo}
        },
        props: ['foo'],
        methods: {
            increment: function() {
                this.$emit('update:foo', ++this.copyFoo);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {bar: 0}
    });
</script>

说明：代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>，就是一个语法糖。