关于vue .sync修饰符

Question

vue中的sync修饰符是一种组件属性双向绑定的语法糖。假如有组件1

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

其中visible要使用sync修饰符

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

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

以上是正常的写法，那么我现在要用构造函数的形式调用components1，带有sync修饰符的属性应该怎么写

var constructor = Vue.extend(component1)
var vm = new constructor({
    propsData:{
        title:'我是title',
        'visible.sync':true //这样写不对，应该怎么写
    }
})

为什么踩我问题（手机app可以看到是谁踩了），是我问的太傻b了，还是你们都是大神，不屑于回答这种问题。

Answer 1

貌似函数式调用不能使用语法糖，只能这样写

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)

Answer 2

sync意思是数据改变的时候同步更新而不是异步更新。

visible:true

http://jsfiddle.net/631807682...

不需要在propsData写visible.sync，你要理解propsData传递到props，当组件创建的时候会把props/data/methods合并到vm实例上。那么他们是怎么合并的呢，data会添加get/set代理以便数据响应，但是props并不会，因为在其父组件上已经添加了过一遍了，观察器也有了，更不会把visible.sync理解为一个语法，只会当成一个字符串罢了。