vue3 中v-model语法糖示例详解

更新时间：2024年06月25日 14:51:49 作者：宝子卡粉

vue3中的v-model相当于vue2中的v-model和v-bind.sync 修饰符组合在一起的产物（择优整合）v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 v-model 绑定属性,使用参数区分,这篇文章主要介绍了vue3 中v-model语法糖,需要的朋友可以参考下

一、 vue2 中 v-model 语法糖

实现父子组件双向数据绑定，一个输入框或者组件指定绑定一个 v-model

1. 父组件写法

<template>
  <div>
    <h1>App</h1>
    <h2>{{ count }}</h2>
    <input type="text" v-model="count" />
    <!-- 展开写法，@input中的 count 的值来自当前输入框事件 -->
    <input type="text" :value="count" @input="count = $event.target.value" />
    <hr />
    <Children v-model="count"></Children>
    <!-- 展开写法，@input中的 count 的值来自子组件输入框中的值 $event.target.value -->
    <Children :value="count" @input="count = $event"></Children>
  </div>
</template>
<script>
import Children from "@/components/Children.vue";
export default {
  components: {
    Children,
  },
  data() {
    return {
      count: "1",
    };
  },
};
</script>

2. 子组件写法

<template>
  <div>
    <h1>main</h1>
    <div>{{ value }}</div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
    },
  },
};
</script>

二、 vue2 的 v-bind.sync 修饰符语法糖，实现父子组件双向数据绑定

注意：子组件标签中可以同时使用多个 .sync 修饰符

1. 在父组件中

<template>
  <div>
    <h1>App</h1>
    <input v-model="count" type="text" />
    <hr />
    <Children :count.sync="count"></Children>
    <!-- 展开写法，@update:value中的 count 的值来自子组件输入框中的值 $event.target.value -->
    <Children :count="count" @update:count="count = $event"></Children>
  </div>
</template>
<script>
import Children from "@/components/Children.vue";
export default {
  components: {
    Children,
  },
  data() {
    return {
      count: "1",
    };
  },
};
</script>

2. 在子组件中

<template>
  <div>
    <h1>main</h1>
    <h2>{{ count }}</h2>
    <input
      type="text"
      :value="count"
      @input="$emit('update:count', $event.target.value)"
    />
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: String,
    },
  },
};
</script>

三、 vue3 的 v-model 语法糖

vue3 中的 v-model 相当于 vue2 中的 v-model 和 v-bind.sync 修饰符组合在一起的产物（择优整合）v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 v-model 绑定属性，使用参数区分

1. 在父组件中

<template>
  <div>
    <h1>App</h1>
    <h2>{{ count }}</h2>
    <input type="text" v-model="count" />
    <!-- 此展开写法，仅限于输入框 -->
    <input type="text" :value="count" @input="count = $event.target.value" />
    <hr />
    <Children v-model:count="count"></Children>
    <!-- 此展开写法，仅限于组件 -->
    <Children :count="count" @update:count="count = $event"></Children>
  </div>
</template>
<script>
import Children from "@/components/Children.vue";
import { ref } from "vue";
export default {
  components: {
    Children,
  },
  setup() {
    const count = ref("1");
    return { count };
  },
};
</script>

2. 在子组件中

<template>
  <div>
    <h1>main</h1>
    <div>{{ count }}</div>
    <label>
      count：<input
        type="text"
        :value="count"
        @input="emit('update:count', $event.target.value)"
      />
    </label>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: String,
    },
  },
  setup(props, { emit }) {
    console.log(props);
    return { emit };
  },
};
</script>

到此这篇关于vue3 中v-model语法糖的文章就介绍到这了,更多相关vue3 v-model语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现pdf导出解决生成canvas模糊等问题(推荐)
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧
2018-10-10
vue 项目@change多个参数传值多个事件的操作
这篇文章主要介绍了vue 项目@change多个参数传值多个事件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-01-01
使用Vue3+PDF.js实现PDF预览功能
项目中有一个需要预览下载pdf的需求,网上找了很久,决定使用 pdf.js 完成,下面这篇文章主要给大家介绍了关于使用Vue3+PDF.js实现PDF预览功能的相关资料,需要的朋友可以参考下
2022-12-12
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
这篇文章主要介绍了前后端分离 vue+springboot 跨域 session+cookie失效问题的解决方法，解决过程也很简单 ,需要的朋友可以参考下
2019-05-05
Vue ELement Table技巧表格业务需求实战示例
这篇文章主要介绍了Vue ELement Table技巧表格业务需求实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Springboot运用vue+echarts前后端交互实现动态圆环图
我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现，感兴趣的可以了解一下
2021-06-06
详解webpack+vue-cli项目打包技巧
本篇文章主要介绍了详解webpack+vue-cli项目打包技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
基于vue实现动态Tab标签页功能
这篇文章主要介绍了如何基于vue实现动态Tab标签页功能,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-09-09
vue-cropper插件实现图片截取上传组件封装
这篇文章主要为大家详细介绍了vue-cropper插件实现图片截取上传组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
浅谈vue的props，data，computed变化对组件更新的影响
本篇文章主要介绍了浅谈vue的props，data，computed变化对组件更新的影响，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01