自定义组件如何使用 v-model

问题： 在使用自定义组件时，我们有时候需要使用 v-model 来双向绑定。

方法： 在vue中，v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的方法（注意，这个value的prop是需要在自定义组件内声明的），如下：

子组件：

<template>
  <div class="hello">
    <h2>值为：{
    
    {
    
    value}}</h2>
    <button @click="add">加一</button>
  </div>
</template>

<script>
export default {
    
    
  props:{
    
    
    value:{
    
    
      type:Number
    }
  },
  methods:{
    
    
    add(){
    
    
      this.$emit("input",this.value+1)
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <HelloWorld v-model="test" />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
    
    
  components: {
    
    
    HelloWorld
  },
  data(){
    
    
    return {
    
    
      test:9
    }
  },
}
</script>

此时 v-model 的功能就实现了，但是此时的事件名和 prop 名是固定的，如果需要修改，就需要在子组件使用 model 选项。如下：

子组件：

<template>
  <div class="hello">
    <h2>值为：{
    
    {
    
    value}}</h2>
    <button @click="add">加一</button>
  </div>
</template>

<script>
export default {
    
    
  model:{
    
    
    prop: 'checked',  // 此时就是绑定的checked了，并且这个checked也是需要在props里面声明的
    event: 'change'
  },
  props:{
    
    
    checked:{
    
    
      type:Number
    }
  },
  methods:{
    
    
    add(){
    
    
      this.$emit("change",this.checked+1)
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <HelloWorld v-model="test" />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
    
    
  components: {
    
    
    HelloWorld
  },
  data(){
    
    
    return {
    
    
      test:9
    }
  },
}
</script>

此时就可以自定义我们的prop名和事件名了

官网地址：vue官网