自定义组件的v-model

我实现的是给自定义组件定义一个v-model。

v-model原本是为具有value属性的标签设定的，但是我们自定义的子组件在使用v-model时，怎么实现.

我这里实现的是给子组件绑定一个v-model。然后在子组件中实现这个v-model的全部流程。关于v-model的核心讲解，百度一下，度娘会给出很多博客的。

v-model的语法糖包装：
 <input v-model=\"something\">
实际为：
<input
:value=\"something\"
@:input=\"something = $event.target.value\">

我的样例文件复制给大家：

子组件：

<template>
    <el-row>
      <el-col :span=\"24\">
        <button type=\"button\" :value=\"dataFromOther\" @click=\"handleClick\">{{dataFromOther}}</button>
      </el-col>
    </el-row>
</template>

< >
export default {
  name: \'Header\',
  data () {
    return {
      mcount: 0,
      dataFromOther: this.fromOther
    }
  },
  model: {
    prop: \'fromOther\',
    event: \'change\'
  },
  props: {
    // 接收父组件传递过来的值（v-model=“被传递的值”）
    fromOther: {
      type: String
    }
  },
  methods: {
    handleClick () {
      this.mcount += 1
      this.dataFromOther = \'我是新值\' + (this.mcount)
      // 触发事件，并传入新值
      this.$emit(\'handleClick\')
    }
  }
}
</ >

<style scoped>
.header-wrap{
width:100%;
}
</style>

父组件： <mheader class=\"header\"   v-model=\" Text\"></mheader>

<template>
  <div id=\"app\">

    <el-container>
      <el-header>
        <!-- 自定义v-model=\" Text\"应用 此处将 Text 传递给子组件中的props -->
        <mheader class=\"header\"   v-model=\" Text\"></mheader>
      </el-header>
      <el-container>
        <el-aside width=\"200px\">
          <navmenu></navmenu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>

  </div>
</template>

< >
import NavMenu from \'@/components/NavMenu\'
import Header from \'@/components/Header\'
export default {
  name: \'App\',
  data  () {
    return {
       Text: \'我来测试自定义v-model\'
    }
  },
  components: {
    \'navmenu\': NavMenu,
    \'mheader\': Header
  }
}
</ >

<style>
.header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
}
</style>