vue 自定义组件使用v-model

第一种实现方法

1. 使用

<my-component v-model="content" @sub="handleSubmit"></my-component>

2. my-component组件

<template>
  <div>
    <input v-model="demo" />
    <button @submit="sub"></button>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      demo: ''
    }
  },
  methods: {
    sub() {
      this.$emit('input', this.demo)
      this.$emit('sub')
    }
  }
}
</script>

第二种 （极简实现，组件无需定义变量）

使用方式：

<my-component v-model="content"></my-component>

my-component实现

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

　　

参考文档1

参考文档：https://www.jb51.net/article/125946.htm