Vue 中的 sync 修饰符

子组件修改父组件中的某个属性值，正常写法

<body>
    <div id="app">
        <child :msg="msg" @change="doChange"></child>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        // 子组件的配置对象
        const child = {
        template: `
                <div>
                    <h1>{{msg}}</h1>
                    <button @click="change">点击修改h1的内容</button>
                </div>
            `,
        props: {
            msg: String
        },
        methods: {
            change: function() {
            this.$emit("change", "这是被子组件修改后的内容");
            }
        }
        };

        // 注册子组件
        Vue.component("child", child);

        const vm = new Vue({
        el: "#app",
        data: {
            msg: "这是父组件中的数据"
        },
        methods: {
            doChange: function(data) {
            this.msg = data;
            }
        }
        });
    </script>
</body>

使用sync修饰符的写法

操作步骤:

子组件中: this.$emit("update:msg", params); //此处触发的事件名称必须是 "update:变量名"

在父组件的组件模板中，找到对应的子组件标签，把其中的 :msg="msg" 改写为 :msg.sync="msg"

注意: 此处的 "update:msg

<body>
    <div id="app">
        <child :msg.sync="msg"></child>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        // 子组件的配置对象
        const child = {
        template: `
                <div>
                    <h1>{{msg}}</h1>
                    <button @click="change">点击修改h1的内容</button>
                </div>
            `,
        props: {
            msg: String
        },
        methods: {
            change: function() {
            this.$emit("update:msg", "这是被子组件修改后的内容");
            }
        }
        };

        // 注册子组件
        Vue.component("child", child);

        const vm = new Vue({
        el: "#app",
        data: {
            msg: "这是父组件中的数据"
        }
        });
    </script>
</body>