1晚吞、.sync修飾組件

<div class="container" style="margin-top: 12px;">
    <div id="demo" class="row">
        {{ say }}
        <br />
        <my-input :value.sync="say"></my-input>
    </div>
</div>


<script>
    new Vue({
        el: '#demo',
        data: {
            say: "123"
        },
        components: {
            "my-input": {
                props: ['value'],
                template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}</div>",
                watch: {
                    value: function(newValue, oldValue) {
                        alert('子組件value新舊值' + newValue + '/' + oldValue);
                        //this.$emit('update:value', newValue)
                    }

                },
                methods: {
                    change1: function(e) {
                        var v = e.target.value
                        this.$emit('update:value', v)
                    },

                }
            }
        },
        watch: {
            say: function(n, o) {
                alert('父組件新舊值' + n + '-' + o)
            }
        },
        methods: {

        }
    })
</script>

2、v-model修飾組件

<div class="container" style="margin-top: 12px;">
    <div id="demo" class="row">
        {{ say }}
        <br />
        <my-input v-model="say"></my-input>
    </div>
</div>


<script>
    new Vue({
        el: '#demo',
        data: {
            say: "123"
        },
        components: {
            "my-input": {
                props: ['value'],
                template: "<div><input v-bind:value='value' v-on:input='change' />{{value}}</div>",
                watch: {
                    value: function(newValue, oldValue) {
                        alert('子組件value新舊值' + newValue + '/' + oldValue);
                        //this.$emit('update:value', newValue)
                    }

                },
                methods: {
                    change: function(e) {
                        this.$emit('input', e.target.value)
                    }
                }
            }
        }
    })
</script>

引用鏈接地址：進入