脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 electron前端开启局域网接口实现流程详细介绍

    Vue electron前端开启局域网接口实现流程详细介绍

    用electron写了一个自己用的小软件，无后端，纯本地的数据。最近想着开发一个手机端app，将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈，直接在前端软件中开启接口
    2022-10-10
  • vue中非父子组件的通信你了解吗

    vue中非父子组件的通信你了解吗

    这篇文章主要为大家详细介绍了vue中非父子组件通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • Vue3+Spring Framework框架开发实战

    Vue3+Spring Framework框架开发实战

    这篇文章主要为大家介绍了Vue3+Spring Framework框架开发实战详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • vue通过watch对input做字数限定的方法

    vue通过watch对input做字数限定的方法

    本篇文章主要介绍了vue通过watch对input做字数限定的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vxe-table vue table 表格组件功能

    vxe-table vue table 表格组件功能

    这篇文章主要介绍了vxe-table vue table 表格组件功能，功能非常强大，文中给大家提到了功能点,需要的朋友可以参考下
    2019-05-05
  • 常见的5种Vue组件通信方式总结

    常见的5种Vue组件通信方式总结

    在 Vue.js 中,组件通信是开发过程中非常重要的一部分,它涉及到不同组件之间的数据传递和交互,本文将介绍如何实现父子组件之间的有效通信,并盘点了常见的5种Vue组件通信方式总结,需要的朋友可以参考下
    2024-03-03
  • vue-router路由传参的两种方式详解(params和query)

    vue-router路由传参的两种方式详解(params和query)

    vue-router 是一个基于vue.js的路由器,它提供了强大的路由功能,能够帮助开发者快速构建单页应用程序,本文将详细介绍 vue-router 路由传参的方法,包括路由传参的概念、路由传参的方法、路由传参的应用场景等,需要的朋友可以参考下
    2024-12-12
  • Vuex报错之[vuex] unknown mutation type: handlePower问题及解决

    Vuex报错之[vuex] unknown mutation type: han

    这篇文章主要介绍了Vuex报错之[vuex] unknown mutation type: handlePower问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • element table多层嵌套显示的实践

    element table多层嵌套显示的实践

    本文主要介绍了element table多层嵌套显示的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于Vue方法实现简单计时器

    基于Vue方法实现简单计时器

    这篇文章主要为大家详细介绍了基于Vue方法实现简单计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论