vue 笔记 -- vue .sync 修饰符 & 组件使用 .sync 和 v-model的区别

.sync 相当于 v-bind: xxx='***'  v-on:update:xxx='*** = $event'

注意：v-bind.sync= 一个对象或者数组

eg1.

// html:

<comp v-bind.sync="doc"></comp>

//js:

var comp = {

        template: `<div>

{{foo}} , {{bar}}

    <button @click="changeFooBar">Longer</button>

</div>`,

        props: ['foo', 'bar'],

        methods: {

            changeFooBar() {

                this.$emit('update:foo', this.foo + '!');

                this.$emit('update:bar', this.bar + '!');

            }

        }

    };

    

var vm = new Vue({

    el: '#app',

    components: {

        comp

    },

    data() {

        return {

            doc: {

                foo: 'foo',

                bar: 'bar'

            }

        }

    }

});

 

eg2.

​//html

<comp v-bind.sync="doc" :baz="baz" @update:baz="baz=$event"></comp>

//.sync可以单独绑定某个属性，即上面的可以直接写成下面这样

<comp v-bind.sync='doc' :baz.sync='baz'></comp>

 

//js

var comp = {

        template: `<div>

{{foo}} , {{bar}} , {{baz}}

    <button @click="changeFooBar">Longer</button>

</div>`,

        props: ['foo', 'bar', 'baz'],

        methods: {

            changeFooBar() {

                this.$emit('update:foo', this.foo + '!');

                this.$emit('update:bar', this.bar + '!');

                this.$emit('update:baz', this.baz + '?');

            }

        }

    };

    var vm = new Vue({

        el: '#app',

        components: {

            comp

        },

        methods: {

        },

        data() {

            return {

                baz: 'baz',

                doc: {

                    foo: 'foo',

                    bar: 'bar'

                }

            }

        }

    })

    

组件中使用 .sync 和 v-model 的区别：

来自：https://juejin.im/post/5eddbaee5188254344768fdc#heading-11