Vue中的.sync 修饰符

vue中不允许子组件去修改props中的值，当我们需要修改数据的时候，就要用this.$emit(" 事件名“,"新值")。同时组件标签上需要绑定@事件名=”方法名“。 .sync是一种简单写法，代码如下。

<script>
    const childContent={
        props:{
            msg:String
        },
        template:`
            <div>
              {{msg}}
            <button @click="change">change</button>
            </div>
        `,
        methods:{
            change(){
                this.$emit("update:msg","6")
            }
        }
    }
    const app = new Vue({
        el:"#app",
        data:{
            msg:"7"
        },
        components:{
            childContent
        },
        methods:{
            getmsg(e){
                this.msg=e
            }
        }
    })
</script>