脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript类库→ vue.js→ vue3 v-model语法糖

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中引入路径@的用法及说明
      这篇文章主要介绍了vue中引入路径@的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
      2022-09-09
    • Vue前端书写规范大全(非常详细!)
      在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,下面这篇文章主要给大家介绍了关于Vue前端书写规范的相关资料,需要的朋友可以参考下
      2023-01-01
    • vue-router3.0版本中 router.push 不能刷新页面的问题
      这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
      2018-05-05
    • Element-Plus实现动态渲染图标的示例代码
      在Element-Plus中，我们可以使用component标签来动态渲染组件，本文主要介绍了Element-Plus 实现动态渲染图标教程，具有一定的参考价值，感兴趣的可以了解一下
      2024-03-03
    • 学习Vite的原理
      这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下
      2022-02-02
    • Vue数据双向绑定的实现方式讲解
      Vue数据双向绑定原理：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新
      2022-08-08
    • vue 实现弹窗关闭后刷新效果
      这篇文章主要介绍了vue 实现弹窗关闭后刷新效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
      2022-04-04
    • Vue+Echarts绘制饼图的示例详解
      这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现绘制饼图，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
      2023-03-03
    • vue2.0实现选项卡导航效果
      这篇文章主要为大家详细介绍了vue2.0实现选项卡导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2022-03-03
    • element-ui 中使用upload多文件上传只请求一次接口
      这篇文章主要介绍了element-ui 中使用upload多文件上传只请求一次接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
      2019-07-07

    最新评论