草庐IT

关于vue3中v-model做了哪些升级

壮壮仔儿 2023-03-28 原文

发生变化：

  • 在自定义组件上使用时，v-model的prop 和 event 默认名称会更改：
    • prop：value->modelValue
    • event ：input=> update:modelValue
  • v-bind的.sync修饰符和组件model选项被删除并替换为v-model
  • v-model现在可以在同一个组件上进行多个绑定
  • 可以自定义v-model修饰符

2.x语法

在input中使用

<input v-model='message'>

<!-- would be shorthand for: -->

<input :value='message' @input='message=$event.target.value'>

在组件中使用

<ChildComponent v-model="message" />

<!-- would be shorthand for: -->

<ChildComponent :value="message" @input="message = $event" />

如果我们想将 prop 或事件名称更改为不同的名称，我们需要向组件添加一个model选项，如：

//ParentComponent.vue

<ChildComponent v-model="message" />

//ChildComponent.vue

export default {
    model: {
        prop: 'info',
        event: 'change',
    },
}

v-model在这种情况下，就相当于：

<ChildComponent :info="message" @change="message = $event" />

v-bind.sync

某些情况下，我们需要实现对组件属性的双向绑定。例如我们在上面这个ChildComponent中，通过某一事件的触发（如点击某一按钮）从而向父组件传达分配新值

this.$emit('update:info', newValue)

父组件侦听该事件并更新本地数据：

//ParentComponent.vue
<ChildComponent :info="message" @update:info="message = $event" />

简写为以下形式：

<ChildComponent :info.sync="message" />

3.x语法

在 3.x 版本中，组件上使用 v-model相当于传递了一个 modelValue 属性以及触发一个 update:modelValue 事件

<ChildComponent v-model="message" />

<!-- would be shorthand for: -->

<ChildComponent
  :modelValue="message"
  @update:modelValue="message = $event"
/>

如果要改变绑定的属性名，我们可以将参数传递给v-model

<ChildComponent v-model:info="message" />

<!-- would be shorthand for: -->

<ChildComponent :info="message" @update:info="message = $event" />

如果我们想在子组件中用input绑定传递过来的数据，并做实时修改那该怎么操作呢？
首先我们不能直接绑定传递过来数据，哪怕绑定了也无法做到实时修改，父组件传递了那就是传递了你如何都影响不到我当前组件的实际数据。而且一般在项目中我们都不会直接对props数据进行绑定修改。我们可以利用个中间值数据去操作，如：

<input v-model='dataDetail'>
export default {
    computed: {
        dataDetail: {
            set(value) {
                this.$emit('update:modelValue',value)
            },
            get() {
                return this.modelValue
            }
        }
    },
}

另外，它可以进行多个绑定：

<ChildComponent v-model:info="message" v-model:content="cons" />
<!-- 相当于 -->
<ChildComponent
    :info="message"
    @update:info="message = $event"
    :content="cons"
    @update:content="cons = $event"
/>
v-modelmodelcodemessageChildComponent

有关关于vue3中v-model做了哪些升级的更多相关文章

  1. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案，但在Google上花了很多时间，所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中，我有几个模型共享一种特定类型的字符串属性，该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复)，但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件，但这只会让验证干给这个特殊的字符串它自己的模型，但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类，但是我如何得到ActiveRecord关联这个类模型

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  4. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  5. ruby - 在不使用 RVM 的情况下在 Mac 上卸载和升级 Ruby - 2

    我最近决定从我的系统中卸载RVM。在thispage提出的一些论点说服我:实际上，我的决定是，我根本不想担心Ruby的多个版本。我只想使用1.9.2-p290版本而不用担心其他任何事情。但是，当我在我的Mac上运行ruby--version时，它告诉我我的版本是1.8.7。我四处寻找如何简单地从我的Mac上卸载这个Ruby，但奇怪的是我没有找到任何东西。似乎唯一想卸载Ruby的人运行linux，而使用Mac的每个人都推荐RVM。如何从我的Mac上卸载Ruby1.8.7？我想升级到1.9.2-p290版本，并且我希望我的系统上只有一个版本。 最佳答案

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  7. ruby-on-rails - 您希望看到哪些 Rails 插件？ - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为？您过去曾搜索过哪些插件功能但找不到？哪些现有的Rails插件可以改进或扩展，如何改进或扩展？ 最佳答案 我希望在管理界面中看到一个引擎插件，它提供了应用程序中所有模型的仪表板摘要，以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questio

  8. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调，即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中？我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

  9. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  10. ruby-on-rails - 工厂女孩/Rails : Generator to create a factory for existing model? - 2

    我在我的Rails项目中使用rspec_rails和factory_girl_railsgem。所有模型都已创建。是否有我可以运行的生成器来为现有模型创建工厂文件？例如:我已经有了一个Blog模型。RSpec允许我通过简单地运行以下命令在spec/models/blog_spec.rb生成一个模型规范文件:railsgeneraterspec:modelblog是否有我可以在命令行中运行的生成器，它会为这个现有模型生成工厂文件，位于:spec/factories/blogs.rb？我在factory_girl_rails中没有看到任何关于发电机的提及文档。

随机推荐