标签：vc Vue2 default vue3 vue2 Vue3 组件 model modelValue

场景

总结一波 v-model 原理，先说结论：v-model 本身是 v-bind 和 v-on 结合在一起的语法糖，是用于原生标签（如input、textarea...）和自定义组件上的一个简化包装，在 vue2 中 props 接收的 value，事件为 $emit(事件)；在 vue3 中接收的 modelValue，事件为 $emit('update:modelValue')。原生的 v-model 会自动识别标签属性和事件。下面说实现。

步骤

以下代码实现全部是在工程化 vue3 中实现，但在 vue3 中也是支持 vue2 写法的，只不过会有坑

1. 实现一个基本的语法糖

// index.vue
<template>
  <div class="test-vc">
    <input
      :value="vc"
      type="text"
      placeholder="请输入内容"
      @input="vc = $event.target.value"
    />
    <div> 输入的文本内容：{{ vc }} </div>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        vc: ''
      };
    }
  };
</script>

<style>
  .test-vc {
    width: 200px;
    height: 200px;
    padding: 16px;
    margin: 20px auto 0;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
</style>

2. 完结版-在子组件上实现双向绑定（vue3 && vue2）

// 子组件代码
<template>
  <div class="test-child">
    子组件
    <input type="text" placeholder="请输入内容" @input="onInput" />
    子组件输入内容：{{ modelValue }}
  </div>
</template>

<script>
  export default {
    name: 'ChangeChild',
    props: {
      // 如果是 vue2 这里 modelValue 换成 value，方法内还有一处
      modelValue: {
        type: String,
        default: ''
      }
    },
    data() {
      return {};
    },
    methods: {
      onInput(event) {
        // 如果是 vue2 这里 update:modelValue 换成 input
        this.$emit('update:modelValue', event.target.value);
      }
    }
  };
</script>

<style>
  .test-child {
    margin-top: 20px;
  }
</style>

// 父组件代码
<template>
  <div class="test-vc">
    <input
      :value="vc"
      type="text"
      placeholder="请输入内容"
      @input="vc = $event.target.value"
    />
    <div> 输入的文本内容：{{ vc }} </div>

    <ChangeChild v-model="vd" />
  </div>
</template>

<script>
  import ChangeChild from './ChangeChild.vue';
  export default {
    name: 'Test',
    components: { ChangeChild },
    data() {
      return {
        vc: '',
        vd: ''
      };
    }
  };
</script>

<style>
  .test-vc {
    width: 200px;
    height: 200px;
    padding: 16px;
    margin: 20px auto 0;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
</style>

标签：vc,Vue2,default,vue3,vue2,Vue3,组件,model,modelValue
来源： https://www.cnblogs.com/zxn-9588/p/15599194.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。