前言

v-model 一般直接在原生表单组件上使用，但是假如我们想在普通组件上使用呢。

<Rate v-model="value"></Rate>

页面中

export default {
 name: 'App',
 components: {
   Rate,
 },
 data() {
   return {
     value: '',
   }
 }
}

实现思路

关键点：

• this.props.value 接受父组件的值
• $emit('input', value)

Rate组件的实现

<template>
  <div class="rate">
    <button v-for="(item,index) in arr" :key="index" @click="$emit('input',item)">
      {{ item }}
    </button>
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: "Rate",
  data() {
    return {
      arr: [1, 2, 3]
    }
  },
  props: {
    value: {
      type: Number,
      default: 0,
    }
  }
}
</script>

效果：