Vue 自定义v-model

官方实例
父组件

<template>
  <div>
    <p>父组件:{{name}}</p>
    <Child v-model="name" />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: "customvmodel",
  data(){
    return{
      name: "123",
    }
  },
  components:{
    Child
  }
}
</script>

子组件

<template>
  <div>
    <input type="text" :value="cname" @input="$emit('change',$event.target.value)"/>
    <br/><br/><!-- 自定义v-model 不一定只使用在表单组件里面,看看下面例子 -->
    <button type="button" @click="$emit('change', '改变'+(Math.ceil(Math.random()*10))) ">{{cname}}</button>
  </div>
</template>

<script>
export default {
  model:{
    prop: "cname",
    event: "change"
  },
  props:{
    cname:{
      type: String,
      defalult:()=>""
    }
  }
}
</script>

主要就是子组件里面定义的model

• prop 是用来接收父组件v-model传递的name, 我们将他定义为cname, 同时在props里面也必须定义 cname
• event 定义一个事件名称,只需要用$emit触发这个事件并传入一个新的值,父组件 name 的 property 将会被更新

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
自定义v-model 不一定只使用在表单组件上
效果图