Vue3 v-model cannot be used on a prop,

这篇具有很好参考价值的文章主要介绍了Vue3 v-model cannot be used on a prop,。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在官网均可找到解决方案

单向数据流

所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。这避免了子组件意外修改父组件的状态的情况,不然应用的数据流将很容易变得混乱而难以理解。

另外,每次父组件更新后,所有的子组件中的 props 都会被更新到最新值,这意味着你不应该在子组件中去更改一个 prop。若你这么做了,Vue 会在控制台上向你抛出警告:

export default {
  props: ['foo'],
  created() {
    // ❌ 警告!prop 是只读的!
    this.foo = 'bar'
  }
}

导致你想要更改一个 prop 的需求通常来源于以下两种场景:

  1. prop 被用于传入初始值;而子组件想在之后将其作为一个局部数据属性。在这种情况下,最好是新定义一个局部数据属性,从 props 上获取初始值即可:

export default {
  props: ['initialCounter'],
  data() {
    return {
      // 计数器只是将 this.initialCounter 作为初始值
      // 像下面这样做就使 prop 和后续更新无关了
      counter: this.initialCounter
    }
  }
}

 2. 需要对传入的 prop 值做进一步的转换。在这种情况中,最好是基于该 prop 值定义一个计算属性:

export default {
  props: ['size'],
  computed: {
    // 该 prop 变更时计算属性也会自动更新
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

另一种在组件内实现 v-model 的方式是使用一个可写的,同时具有 getter 和 setter 的计算属性。get 方法需返回 modelValue prop,而 set 方法需触发相应的事件:文章来源地址https://www.toymoban.com/news/detail-422180.html

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

到了这里,关于Vue3 v-model cannot be used on a prop,的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 系列:自定义 v-model

    1. input 中的 v-model 2. naive-ui 组件二次封装 v-model

    2024年02月07日
    浏览(38)
  • Vue3:有关v-model的用法

    目录 前言: 回忆基本的原生用法: 原生input的封装: 自定义v-model参数: 对el-input的二次封装: 多个v-model进行绑定: v-model修饰符: v-model自定义参数与自定义修饰符的结合:         提起v-model,想必都不陌生,作为vue的经典语法,帮助我们在编写项目的时候,省了很多很多

    2024年02月05日
    浏览(36)
  • vue3 的v-model语法糖

    Vue2的v-model默认解析成:value与@input Vue3的v-model默认解析成:modelValue与@update:modelValue 所以要是想通过封装组件支持v-model的使用,用v-model语法糖无疑是最好的选择 子组件定义使用modelValue进行接收父组件传递过来的值,定义事件update:modelValue通知父组件改变一些事情 举例使用:

    2024年02月03日
    浏览(74)
  • vue3 子组件实现v-model用法

    在Vue 3中,实现自定义的 input 组件并支持 v-model 绑定,涉及到对 modelValue 这个默认prop的处理和对应的 update:modelValue 事件的触发。Vue 3使得这个过程比Vue 2更为简化和灵活,尤其是在可以自定义绑定的属性和事件名方面。 步骤 1: 创建自定义Input组件 首先,创建一个自定义的I

    2024年04月27日
    浏览(41)
  • 组件v-model(.sync)记录使用(vue3)

    首先,让我们来了解一下Vue3中v-model的用法。在Vue3中, v-model 指令可以用于自定义组件上,用于实现组件的双向数据绑定。与Vue2中的 .sync 不同, Vue3中的v-model需要在组件中手动实现双向绑定逻辑。 下面是一个简单的父组件示例,展示了如何在Vue3中使用 v-model 来实现组件的双

    2024年01月19日
    浏览(44)
  • Vue3.2+TS的组件间的v-model传值

    组件之间的v-model,为什么可以v-model,大家可以去看看v-model的原理,然后就会发现这个方法一目了然。 父组件 子组件 假如子组件需要按照某个方法变化,那么可以自己定义,比如需要自增加50

    2024年02月13日
    浏览(44)
  • vue3探索——组件通信之v-model父子组件数据同步

    再很多场景中,我们可能想在子组件中修改父组件的数据,但事实上,vue不推荐我们这么做,因为数据的修改不容易溯源。 在vue2中,我们使用 .sync 修饰符+自定义事件 \\\'update:xxx\\\' ,来使父子组件数据同步。 这里不作过多说明,有需要请自行了解。 vue3的写法与vue2基本一致。最

    2024年02月11日
    浏览(58)
  • Vue3-在HTML标签、组件标签上使用v-model

    本篇为Vue3学习中遇到的v-model相关的记录,如有问题欢迎指正 v-model通常在input、select等标签上来实现数据双向绑定 原理 :v-model通过给标签value赋值来实现  数据—页面 的绑定。然后通过绑定input事件实现 页面—数据 的绑定。 原理 :在组件上时,v-model通过 :modelValue 来进行

    2024年01月24日
    浏览(59)
  • vue3中l和vue2中v-model不同点

    vue2比较让人诟病的一点就是提供了两种双向绑定:v-model和.sync, 在vue3中,去掉了.sync修饰符,只需要使用v-model进行双向绑定即可。 为了让v-model更好的针对多个属性进行双向绑定(vue2中自定义组件中v-model只能使用一次),vue3做出了以下修改: 1、当对自定义组件使用v-mod

    2024年01月21日
    浏览(36)
  • 【Vue技巧】Vue2和Vue3组件上使用v-model的实现原理

    ChatGPT4.0国内站点,支持GPT4 Vision 视觉模型:海鲸AI 在Vue中, v-model 是一个语法糖,用于在输入框、选择框等表单元素上创建双向数据绑定。当你在自定义组件中实现 v-model 功能时,你需要理解它背后的原理: v-model 实际上是一个属性和一个事件的简写。 在 Vue 2.x 中, v-mode

    2024年01月15日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包