vue 高级特性 自定义v-model

vue 高级特性 自定义v-model

1）自定义v-model（v-bind+触发的input事件）实现双向绑定

 父组件：

<template>
  <div class="header">
    <!-- rights组件 -->
    <p>{{name}}</p>
    <!-- 自定义v-model -->
    <Inp v-model="name"></Inp> 
    <!--argments[0]就是$emit传出来的值 <Inp :name="name" @input="name=argments[0]"></Inp> -->
    <!--平时我们使用的 <input type="text" v-model="name"> -->
  </div>
</template>

<script type="text/ecmascript-6">
import Inp from './inp'
export default {
  data() {
    return {
      name: 'liu man'
    }
  },
  components:{
    Inp,
  },
  
}
</script>

 子组件：

使用model配置的好处是 可能会传其他值进来作为一个区别

<template>
  <div>
    <!-- inp组件 -->
    <input type="text" :value='text1' 
      @input="$emit('change',$event.target.value)"
    >
  </div>

  <!--  需要注意的是
    1. 上面的input 使用了v-bind  :value
    2. 上面的change事件名需要与model中event 事件名一致
    3. text1 属性需要对应 否则凉；凉
  -->
</template>

<script>
export default {
  // 自定义v-model 需要配置model
  model: {
    prop: 'text1', // 必须对应props中text1属性
    event: 'change'
  },
  props: {
      text1: String,
      default(){
        return ''
      }
  },
}
</script>