vue双向绑定原理

自定义组件实现 v-model 双向绑定，首先要先明白 v-model，这个指令到底实现了什么？

v-model实际做的事情就是：传入一个value属性值，然后监听input事件返回一个值，用该返回值赋值value对应的传入值。

正常写法

<input v-model="userName" />

换种写法

<input :value="userName " @input="demoValue = $event.target.value" />

再换写法：

自定义组件 实现双向绑定
ButtonComponent组件的写法：

<button
　　v-for="(item, index) in options"
　　:key="item.$value"
　　@click="handleTabSelect(item)">
　　{{ item.$text }}
</button>
　　props：
　　　　value: {
 　　　　type: String,
　　　　　default: ’’
   　　　},
   　　　options: {
　　　　　　type: Array,
　　　　　　default: []
　　　　}
　　methods：
　　handleTabSelect(item) {
　　　　this.$emit(‘input’, item.$value);
　　}

使用组件 直接使用v-mode的方式就能读取数据了

或者

<ButtonComponent :options="tabOptions" @input="handleValue"/>　　
　　data:
　　tabValue="",
　　tabOptions = [{
　　　　$text: "本地选择",
　　　　$value: "local"
　　} , {
　　　　$text: "COS选择",
　　　　$value: "cos"
　　}]　　
　　methods:
　　handleValue(value){
   　　　　this.tabValue = value;
　　}