自定义v-model事件

父组件

<template>
  <div class="home">
    <p>{{name}}</p>
    <v-model v-model="name"></v-model>
  </div>
</template>
<script>
import vModel from '@/components/HelloWorld'
export default {
  name: 'home',
  components: {
    vModel,
  },
  data() {
    return {
      name: '张三',
    }
  },
  methods: {
  },
}
</script>

子组件

<template>
  <input type="text" :value="text" @input="$emit('change',$event.target.value)" />
</template>

<script>
/**
 * input使用了:value而不是v-model
 * change和 model change要对应
 * text属性对应
 */
export default {
  model: {
    prop: 'text',
    event: 'change',
  },
  props: {
    text: String,
    default() {
      return ''
    },
  },
}
</script>
<style scoped lang="stylus"></style>