2017年6月30日 星期五

(倚靠vue，是你自己不會架構，別人都幫你寫好好，屌吹個屁)........父子數據連動

 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js_lib/vue-2.3.0.js"></script>
    <!--<script src="../../js_lib/vue-2.3.0.min.js"></script>-->
    <script>
        Vue.component('child_1', {
            template: '<div>\
            <p><input type="text" v-model="namex"></p>\
          </div>',
            props: ['name'],
            data:function(){
                return {
                    namex: this.name
                };
            },
            watch: {
                // 當本身 name 有變動
                // 通知 parent 更新自身數據
                namex: function(){
                   this.$emit('update:name', this.namex);
                }
            }
        });
    </script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
        </div>
        <hr>
        <child_1 :name="name" @update:name="getName"></child_1>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: 'a.......'
            },
            methods: {
                getName: function (value) {
                    // debugger;
                    this.name = value;
                }
            }
        });
    </script>
</body>

</html>

於