About the vue .sync modifier

The sync modifier in

vue is a syntactic sugar for two-way binding of component properties. If there is component 1

var component1 = {
    template:"<div v-show="visible">{{title}}</div>",
    props:["title","visible"]
}

where visible uses the sync modifier

<template>
    <components1 title="title" :visible.sync="visible"></components1>
</template>

<script>
    export default {
        data(){
            return {
                visible:false
            }
        }
    }
</script>
The

above is the normal way to write it, so now I"m going to call the components1, property with the sync modifier in the form of a constructor. How should I write

?
var constructor = Vue.extend(component1)
var vm = new constructor({
    propsData:{
        title:"title",
        "visible.sync":true //
    }
})

Why step on me (you can see who stepped on my app), is it too stupid for me to ask, or are you all too big to answer this kind of question?

Jul.09,2021

sync means Synchronize updates instead of asynchronous updates when data changes.

visible:true

http://jsfiddle.net/631807682.

you don't need to write visible.sync in propsData , you should understand that propsData is passed to props , and when the component is created, it will merge props/data/methods into the vm instance. So how do they merge? data will add a get/set agent for data response, but props will not, because it has already been added to its parent component, and there is an observer, let alone visible.sync as a syntax, just as a string.


it seems that functional calls cannot use syntax sugar, so you can only write

like this.
var constructor = Vue.extend(component1)
var vm = new constructor({
    propsData: {
        visible: true
    }
})
vm.$on('update:visible', v => {
    vm.visible = v
})
vm.$mount()
this.$el.appendChild(vm.$el)
Menu