VUE v-model用法

在组件上使用v-model

原理

1.语法糖：使用v-model进行数据双向绑定
<input v-model="searchText">
等价于
<input :value="searchText" @input="searchText = $event.target.value" >

2.在组件上使用

父组件
<custom-input v-model="searchText"></custom-input>
等价于
<custom-input :value="searchText" @input="searchText = $event" ></custom-input>
复制代码

子组件
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" >
  </div>
</template>
复制代码

写法一：子组件使用model（主要的写法）

父组件
<demo v-model="query"></demo>
复制代码

子组件
<template>
  <div>
    <span>{{value}}</span>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
 export default {
  model: {  
   prop: 'value',
   event: 'change'
  },
  props: {
    value: ''
  },
  methods: {
    handle() {
      this.$emit('change', this.value+2)
    }
  }
 }
</script>
复制代码

写法二：子组件使用通过监听value和暴露input事件来实现v-model

父组件
<demo v-model="query"></demo>
复制代码

子组件
<template>
  <div>
    <span>{{value}}</span>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
export default {
  props: {
    value: '' //这里必须使用value
  },
  methods: {
    handle() {
      this.$emit("input", this.value + 2);//这里必须使用input方法传数据
    }
  }
};
</script>
复制代码

写法三：使用sync

父组件
<demo :value.sync="query" ></demo>
复制代码

子组件
<template>
  <div>
    <span>{{value}}</span>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
export default {
  props: {
    value:''
  },
  methods: {
    handle() {
      this.$emit('update:value', this.value + 2);
    }
  }
};
</script>
复制代码