vue自定义组件中实现v-model

其实在vue的组件中实现v-model指令的方法就是父子组件传值的方法，只不过不用特别去父组件定义事件罢了，实现方式（不是方法）有两种：

1.vue中默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

//子组件test.vue
<template>
  <div>
    <p>{{value}}</p>
    <button @click="changeVal"></button>
  </div>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    changeVal () {
      this.$emit('input', '我在子组件修改了text')
    }
  }
}
</script>

父组件中代码：

//在父组件中引用test.vue并使用该组件
//因为v-model默认会将input作为事件，所以不需要再父组件定义事件
<Test v-model="text"></Test>

2.使用vue的model选项，这个在vue文档中有说明：model选项

以1里面的例子来说：

//子组件test.vue
<template>
  <div>
    <p>{{qwe}}</p>
    <button @click="changeVal"></button>
  </div>
</template>
<script>
export default {
  props: ['qwe'],
  model: {//model选项可以自定义prop名称和event名称
    prop: 'qwe',
    event: 'changeQwe'
  },
  methods: {
    changeVal () {
      this.$emit('changeQwe', '我在子组件修改了text')
    }
  }
}
</script>

引用组件：

//因为使用model选项可以直接在自定义组件中定义prop和event,所以也不需要特别在父组件定义event
<Test v-model="text"></Test>