1. 第一種體式格局針對 針對單一變量 ,直接上代碼

注重:一切事宜稱號不能用原有的事宜名或許已存在的事宜名,如運用input做為事宜名,不會報錯,然則結果不正確.

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


    <script>
        new Vue({
            el: '#demo',
            data: {
                say: "123"
            },
            components: {
                "my-input": {
                    props: ['value'],
                    data() {
                        return {
                            valuex: ''
                        }
                    },
                    /*  computed: {
                         xxxx() {
                             alert('computed');
                             return this.valuex + '111';
                         }

                     },
                     watch: {
                         value: function() {
                             this.valuex = this.value;
                             alert('watch');
                         }
                     }, */
                    template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}-{{xxxx}}</div>",
                    methods: {
                        change1(e) {
                            var v = e.target.value
                            this.$emit('changevalue', v)
                        }
                    }
                }
            },
            methods: {
                changeage: function(v) {
                    alert(v)
                    this.say = v
                }
            }
        })
    </script>

2. 第二種體式格局針對 針對對象變量(別的範例變量請本身測試,如數組範例)在子組件中直接用v-model即可 ,直接上代碼

注重:子組件中直接用v-model綁定父組件過來的prop
v-model:value="persion.name" .

父組件中
v-bind:persion="persion" 在
官方網站中說能夠如許寫
v-bind="persion" .我試了,然則不能夠.

 <div class="container" style="margin-top: 12px;">
        <div id="demo" class="row">
            <my-input v-bind:persion="persion"></my-input>
        </div>
    </div>

    <script type="text/x-template" id="m-input-template">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <input type="text" v-model:value="persion.name">
            <!-- <input type="text" v-model:value="say"> -->
        </div>
    </script>
    </div>

    <script>
        Vue.component('my-input', {
            props: {
                //say: String,
                persion: Object
            },
            template: '#m-input-template'
        })

        new Vue({
            el: '#demo',
            data() {
                return {
                    //say: "123",
                    persion: {
                        id: 0,
                        name: 'xiaoming',
                        age: 22,
                        isman: true
                    }
                }
            }
        })
    </script>