手动实现一个v-model的不同做法(含封装组件用法)

本文链接：https://blog.csdn.net/qq_41559229/article/details/104738982

本文详细介绍了手动实现Vue v-model的三种不同方式：最简单的方法、使用watch和$emit以及利用最新的model属性。并探讨了在封装组件中如何使用这些方法，特别是封装form表单时，通过v-model直接传值和子组件暴露方法的两种策略。

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

由于疫情的原因啊，我猜大多数人都跟我一样，在家里度过，偶尔学习学习。这不，我遇到了一个如何手动一个v-model的问题，由此展开了学习。
在开始之前我们先需要知道一些知识，v-model是一个语法糖，如下：

<input type="text" v-model="name">

实则是等于下面的：

<input type="text" :value="name" @input="name=$event.target.value">

也就是说，v-model就是绑定了一个名为value的props和一个事件input

    注意：所以在子组件中可以通过props中定义value接受值，然后通过$emit触发input事件传新值并修改。

知道了这个知识之后啊，那么我们就开始实现一个自定义的v-model啦~~

一、最简单的实现方法

首先是父组件的代码：

<template>
  <div class="">
      <p>{
  {name}}</p>
      <son v-model="name"></son>
      <!-- 等同于下面 -->
      <!-- <son type="text" :value="name" @input="name=子组件传回来的值"> -->
</div>
</template>

<script type="text/javascript">
import Son from './son'
export default {
  name: "",
  data() {
    return {
        name:'ydw',
    }
  },
  components: {
      Son
  }
}
</script>

然后是子组件的代码：

<template>
  <div class>
      <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script type="text/javascript">
export default {
  name: "",
  props:{
      value:{
          type: String,
          defalut () 
              return ''
          }
      }
  },
  data() {
    return {

    }
  },
  components: {
  }
}
</script>

父组件中我加了一个注释的代码行，其实是帮助我自己理解的，不知道有没有小伙伴跟我一样，第