Vue的v-model

学习了一段时间的vue，并尝试着做了几个小项目，在项目中发现了一个问题，就是在写组件的时候，遇到input框时，外部怎么实时取到组件内部input的值的问题。上网查了一下i，自己有也尝试了。

首先先了解了v-model的真正的情况：

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

等同于

<input type="text" :value="val" @input="val=$event.target.value">

可以看到，实际上就是绑定了一个value属性，然后去监听input时间，实时的更新当前的value值。

那么我们可以借用这个思想，再加上计算属性的get和set去控制组件内部的值和组件外部的v-model的值的绑定：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-->等同于<my-component :value="parentValue" @input="parentValue=$event.target.value"></my-component><-->
        <my-component v-model="parentValue"></my-component>
        <p>{{parentValue}}</p>
    </div>
    <script type="text/javascript">
      Vue.component('my-component',{
        template:`<input type="text" v-model="currentValue">`,
        props:['value'],//收到value
        computed: {
          currentValue: {
            get () {//动态设置子组件的input值
              return this.vlaue
            },
            set (val) {//当子组件input的值发生变动的时候，通知父组件也更新
              this.$emit('input', val)
            }
          }
        }
      })
     new Vue({
       el: '#app',
       data:{
           parentValue: ''
       }
      })
    </script>
</body>
</html>

 

posted @ 2018-01-21 16:22  JavaScriptBUG  阅读(120)  评论(0)  编辑  收藏  举报