小白学习Vue(?)--model选项的使用（自定义组件文本框双向绑定）

1. model选项：

v-model在普通dom的表单标签上使用可以实现双向绑定，但在自定义组件标签中就不行，其要实现双向绑定需要model选项来实现

理解这个属性，可以很好的理解v-model的绑定原理，可以对照v-model的使用来浏览本文

1.1. <input>文本框

 刚开始加载时，<span>标签取的{{name}}是vue实例的属性值，所以会显示bbb
 而渲染子组件时，子组件绑定的value是子组件中data的value，所以会显示aaa

 输入时，输入的值是value（对应子组件data的value属性），输入后触发绑定的input事件
·
 通过$emit，调用名为input-value的事件的回调函数，其中输入的value（即$event.target.value）作为参数传递

那会执行声明回调函数呢？这个就得关注model选项
·
 这个model选项，当指定的event触发时，会修改prop的绑定属性值为传递的参数值
 prop的绑定属性值改变了，vue实例对应属性值也会改变
 $emit(‘input-value’,$event.targe.value)的调用结果就是，把vue实例属性name修改为input输入的值
·
关于$.emit的使用可以查看vue的全局api

<div id="test-modelComponent-input">
    <span>name: {{name}}</span><br/>
    <input-text v-model="name" placeholde="edit me"></input-text>
</div>

<script>
    Vue.component('input-text', {
        model: {
            prop: 'name',
            event: 'input-value'
        },
        data: function () {
            return {
                value: 'aaa'
            }
        },
        // 和上述data一样，主要定义子组件value属性，因为v-bind:value="value"需要绑定
        // props: {value: String},
        template: `<input type="text" v-bind:value="value" v-on:input="$emit('input-value',$event.target.value)"/>`
    });

    new Vue({
        el: '#test-modelComponent-input',
        data: {
            name: 'bbb'
        }
    });
</script>

普通dom标签的v-model，相当于在内部使用 prop: ‘value’ 和event: ‘input’ ，输入值触发input事件，改变value值

1.2. <textarea>多行文本框：

和自定义组件中<inpu>文本框使用类似

<div id="test-modelComponent-textarea">
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p><br/>
    <input-textarea v-model="message" placeholde="edit me"></input-textarea>
</div>

<script>
    Vue.component('input-textarea', {
        model: {
            prop: 'message',
            event: 'input-value'
        },
        data: function () {
            return {
                value: ''
            }
        },
        // props: {value: String},
        template: `<textarea type="text" v-bind:value="value" v-on:input="$emit('input-value',$event.target.value)"/>`
    });

    new Vue({
        el: '#test-modelComponent-textarea',
        data: {
            message: ''
        }
    });
</script>

1.3. <input>复选框：

 这个和自定义组件中<inpu>文本框使用类似，区别在于绑定checked属性和change事件以及传递的参数是$event.target.checked

<div id="test-modelComponent-checkbox">
    <input-checkbox v-model="checked"></input-checkbox>
    <span>{{checked}}</span><br/>
</div>

<script>
    Vue.component('input-checkbox', {
        model: {
            prop: 'checked',
            event: 'change-value'
        },
        props: {
            checkedValue: Boolean
        },
        template: `<input type="checkbox" v-bind:checked="checkedValue" v-on:change="$emit('change-value',$event.target.checked)"/>`
    });

    new Vue({
        el: '#test-modelComponent-checkbox',
        data: {
            checked: false
        }
    });
</script>

 v-model内部定义的属性和事件

 先这样吧，虽然自定义组件使用多个复选框、单选框这些没整出来，到时候再补充吧… …