Vue之v-model和全局组件

v-model的使用

v-model可以实现数据的双向绑定（数据两端都会发生变化）

用在普通的html标签上面

<input type="text" v-model="username">

下面这种写法可以达到和上面相同的效果 使用 v-bind 来动态传递 prop
<input type="text" v-bind:value="username" v-on:input="username=$event.target.value">

<script>
        var vm =new Vue({
            el:"#app",
            data:{
                username:"zhangsan"
            },
        })
    </script>

在写完后可以看到当在输入框输入信息时可以在上面及时得到结果：

v-model在自定义组件上的使用，如何把数据从组件传到外面，如何把外面的数据传入到组件

<custom-input v-model="username"></custom-input>

上面和下面实现的效果是相同的
<custom-input :value1="username" @input="handlerInput"></custom-input>

<script>
         //全局组件,这里的data是函数,组件是可以复用的  全局组件一定要写在实例的前面
        Vue.component('custom-input',{
            props:['value1'],//通过props象组件传递数据
            template:`<input type="text"
            :value="value1"
            //$emit（）方法：触发当前实例上的事件，有两个参数  
            @input="$emit('input',$event.target.value)"
            >`,//字符串模板的写法  input事件的名字  $event.target.value是输入框里面的值
            data(){
            },
        })
        var vm =new Vue({
            el:"#app",
            data:{
                username:"zhangsan"
            },
            methods:{
                handlerInput(val){
                    this.username=val;
                }
            }
        })
    </script>

在这里也可以实现数据的双向绑定，外面的值传递到组件里面是通过属性传递过来的

从外面的值传到组件里面是通过属性，从组件里面传入到外面通过emit事件