13 VUE学习：组件v-model

在Vue中，v-model是一个双向绑定的指令，它可以在表单元素或者自定义组件上创建数据与视图的双向绑定。

以下是一个使用v-model的基本示例：

<template>
  <div>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，input元素使用v-model与组件的data属性message建立了双向绑定。当输入框的值改变时，message属性也会更新，同时如果message属性的值发生变化，输入框中的内容也会更新以反映当前的值。

对于自定义组件，你可能需要在子组件中显式地触发一个input事件，并且使用value属性来创建双向绑定。

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>Message is: {{ message }}</p>
  </div>
</template>
 
<script>
import CustomInput from './CustomInput.vue';
 
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在自定义组件中：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>
 
<script>
export default {
  props: ['value']
}
</script>

在自定义组件中，我们监听input事件并通过$emit方法发出一个新的input事件，并将输入框的当前值作为参数传递。这样，父组件中的v-model就可以正常工作了。