vue中遇到的组件props数据双向绑定的问题之一

<div id="app">
    <input id="val1" v-model="value1">
    <button @click="clickBtn">点击打印</button>
    <component-input :name.sync="value1"></component-input>
</div>

绑定属性时.sync 

<script type="text/javascript">
    var componentInput = {
        template : "<div>子组件<input v-model='curName'></div>",
        data : function(){
            return {
                curName : this.name
            }
        },
        props : ['name'],
        watch : {
            'name' : function(newVal, oldVal){
                this.curName = newVal;
            },
            curName : function(newVal, oldVal){
                this.$emit("update:name", newVal);
            }
        }
    };

通过在数据监听中$emit实现数据的方向更新（加粗和红色都是关联点）

    new Vue({
        el: "#app",
        data: {
            value1: ""
        },
        components : {
            'component-input' : componentInput
        },
        methods: {
            clickBtn: function () {
                console.log(this.value1);
            }
        }
    });
</script>