自定义组件的v-model

最新推荐文章于 2024-08-01 16:25:54 发布

勤奋笨笨鸟

最新推荐文章于 2024-08-01 16:25:54 发布

阅读量1.5k

点赞数 2

分类专栏：前端页面的坑 vue 文章标签： v-model 自定义-model

本文链接：https://blog.csdn.net/weixin_40098371/article/details/85099060

版权

本文介绍了如何在自定义组件中实现v-model功能。通过在子组件内部处理v-model的逻辑，使得父组件能通过v-model与子组件进行数据交互。示例中，父组件使用<mheader>自定义组件，并绑定v-model为'titleText'。

摘要由CSDN通过智能技术生成

我实现的是给自定义组件定义一个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>

<script>
export default {
  name: 'Header',
  data () {
    return {
      mcount: 0,
      dataFromOther: this.fromOther
    }
  },
  model: {
    prop: 'fromOther',
    event: 'change'
  },