学习了一段时间的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>
