[Vue warn]: useModel() called with prop “xxx“ which is not declared

最新推荐文章于 2025-02-19 16:57:56 发布

Lysun001

最新推荐文章于 2025-02-19 16:57:56 发布

阅读量1.9k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lotpyve/article/details/138117716

版权

文章讨论了在Vue3中使用defineModel时遇到的问题，特别是当属性名采用kebab-case格式时可能不被支持，建议改用驼峰命名法或单个单词解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用vue3里面的defineModel的时候可能会出现这个问题，原因是我们使用的 kebab-case 形式的属性名，我也不知道是不是vue3设定这个api的时候设置的不支持，我没找到相关文档，不过我们把 kebab-case 的形式改为驼峰命名法或者只用一个单词就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lysun001

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.

01-08

1.在写循环的时候遇见这个的原创文章 96获赞 50访问量 6万+ 关注私信展开阅读全文作者：itwangyang520

useVModel()的使用------通俗易懂

m0_57108418的博客

04-06

4447

useVModel（）用来实现父子组件间数据的双向绑定，若不想使用默认回调，也可以自己使用emit实现回调。

1 条评论您还未登录，请先登录后发表或查看评论

vue3使用useVModel实现双向数据绑定v-model指令

Baby_加油_的博客

02-23

4113

vue3使用useVModel实现双向数据绑定v-model指令

vue3 自定义useVModel函数

m0_69853343的博客

02-19

216

2、子组件中触发父组件修改modelValue的方法,这是vue3内部方法，不需要在父组件中监听。//父组件使用v-model给子组件共享了一个对象。

Vue3项目中useVModel的使用方式

weixin_48837605的博客

09-23

5627

vue3.0中v-model会拆解成属性 modelValue 和事件 update:modelValue 父组件: <div class="check"> <XtxCheckbox v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox> <XtxCheckbox v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheck.

Vue3.3发布了，有啥新特性？简单的了解下

前端达人

06-01

2448

前言虽然3.3当前还处于beta阶段但是其带来的一些特性十分激动人心，就在这里简单的给大家带来新特性的前瞻，为以后的升级做做准备????泛型组件支持Vue一直以来[1]都是没办法很好的实现泛型组件，终于在3.3版本增加了这一功能首先是面向TSX用户为defineComponent工具函数增加了泛型支持，当参数传入一个泛型函数时类型会提示正常，比如我们可以基于这个特性使用tsx简单构造一个表格组件imp...

vueuse中的useVModel使用

qq_44723175的博客

05-28

400

写法比defineProps和defineEmits简单了很多。

Vue 报错TypeError: this.$set is not a function 的解决方法

12-12

报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: ...

填坑记录之Vue中v-model与:model区别

01-20

初做vue项目中遇到这个问题，记录一下。源代码：打算做的表单验证功能。结果发现在验证的过程中username规则的第一条正确了却一直通过不了。通过控制台得知长度一直为1。原来是拿不到数据。 v-model通常用于...

vue中提示$index is not defined错误的解决方式

11-19

今天学习Vue中遇到了一个报错信息：$index is not defined，是我写了个for循环在HTML中，然后是因为版本的问题下面是解决方法：原来的是 v-for=”person in items” v-on:click=”deletePerson($index)”//这个...

Vue VueUse-基于Vue组合式API的实用工具集 - 附完整示例

m0_48968874的博客

10-16

6842

2、示例版本三、使用步骤 1、在单页面引入 '@vueuse/core' 2、具体使用（1）useDebounceFn （2）useClipboard 注：复制还可以用插件 - clipboard.js，具体使用可参照这篇博客Js Vue 一键复制文本内容 - clipboard.js（兼容谷歌等主流浏览器）- 附完整示例_clipboard.js vue_Web - Nancy的博客-优快云博客

VueUse中的这5个函数，也太好用了吧

粉丝们务必加入微信粉丝群

08-11

5873

作者：Matt Maribojoc 译者：前端小智来源：medium 有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 VueUse 是 Anthony Fu 大佬的一个开源项目，它为Vue的开发者提供了大量用于 Vue2 和Vue3 的基本 Composition API 实用工具函数。它有几十个用于常见开发人员用.

React Hook “useModel“ is called conditionally. React Hooks must be called in the exact same order...

weixin_43950820的博客

01-26

851

React Hook“useModel”是有条件调用的。在每个组件渲染中，必须以完全相同的顺序调用React Hooks。你是不是在提前回来后不小心叫了React Hook？反作用钩子/钩子规则。useModel 调用必须写在函数的方法的最顶部，这个报错原因之一就是因为从 model 中解构数据的时候把语句没写在最顶部。有时候这个翻译挺误导人，我一直以为是递归组件model循环引入问题，汗！将model写到最顶部就好了。

vue超好用的语法糖useVModel()

qq_63176997的博客

12-26

618

用于定义组件接收的 props，提高代码可读性和类型安全性。defineEmit用于定义组件可以触发的事件，方便组件之间通信。两者共同构成了 Vue 3 组件的输入输出接口，使组件之间的数据流动更加清晰和可控。

VueUse中的这5个函数，也太好用了吧，面试经历怎么说

2401_84139963的博客

04-11

1235

这不是VueUse的完整指南。这些只是我平常比较常用的函数，还有很多好用的函数，大家可以自行到官网去学习使用。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

vue3 update:modelValue 线上环境报错modelValue is not defined

runOnWay的博客

03-28

7210

在使用vue3进行开发子组件显示隐藏时，我们在父组件中给子组件传递v-model:visible来标识子组件的显隐。一般情况，父组件中代码为如下： <Child v-model="drawerVisible" ... /> 子组件，一般使用el-plus中的drawer或modal等弹出框，以下以el-drawer为例 <template> <el-drawer v-model="visible" title="..." directi

「写一次，用千次！」——用 Vue3 的 useTemplate 解锁模板复用新姿势

Caleb的博客

11-19

611

在写 Vue 项目时，我们经常会遇到这样的场景：组件模板逻辑重复、动态渲染复杂、插槽难管理……是不是每次都想骂一句「为啥不能简单点？」别急，这篇文章带你解决这些痛点，用一个函数，轻松搞定模板复用，效率提升不止一点点。比如我们要渲染一组卡片，模板结构都是类似的，但每个卡片内容不一样。按传统写法，可能要重复写好多模板代码。看起来挺简单，但如果有 50 个卡片呢？不仅写起来累，后期改逻辑也麻烦。Vue 的插槽挺好用，但要复用一段复杂的插槽模板，每次都得手动塞内容，比如这样：用起来像这样：这就导致逻辑分散到

【无标题】

qq_35703552的博客

12-28

567

手摸手教你封装几个Vue3中很有用的组合式API SHERlocked93 2021-12-26 08:37:00 ...

[Vue warn]: The data property "visible" is already declared as a prop. Use prop default value instead.

最新发布

03-25

### 警告问题的原因分析在 Vue.js 开发过程中，当 `data` 和 `props` 定义了同名属性时会触发警告 `[Vue warn]: The data property "visible" is already declared as a prop.` 这是因为 Vue 的响应式机制不允许在同一作用域下存在两个具有相同 key 值的数据绑定[^1]。具体来说： - 当组件接收到父组件通过 `props` 传递的值时，这些值会被视为只读。 - 如果开发者又在 `data` 中重新定义了相同的键，则会导致冲突。这种情况下，访问该属性时会产生歧义——到底是应该使用来自 `props` 的值还是 `data` 的值？ --- ### 数据优先级说明在 Vue 组件内部，不同类型的选项之间存在一定的优先级顺序： `props > data > methods` 这意味着如果某个属性既作为 `prop` 又存在于 `data` 中，那么实际生效的是 `props` 提供的值。然而由于重复声明引发的潜在错误或意外行为，框架仍会发出警告提示开发者修正代码结构。 --- ### 解决方案针对上述提到的问题可以采取如下措施之一来消除此警告信息： #### 方法一：移除 Data 中冗余字段最简单的办法就是直接从 `data()` 函数返回的对象里删掉那个与 Prop 同名的成员变量即可。例如假设当前场景下的问题是围绕着名为 `"dialogVisible"` 或者这里所说的通用情况 `"visible"` 发生的话,则只需调整如下: ```javascript // 修改前有问题版本 export default { props: ['visible'], data() { return { visible: false // 此处造成冲突需去除 } }, } // 修改后的正确实现方式 export default { props: ['visible'], data() { return {} }, } ``` 这样做的好处在于完全遵循单向数据流原则，让所有的状态管理更加清晰明了[^3]。 #### 方法二：重命名 Data 属性避免冲突另一种可选策略是保留原有逻辑不变的同时改变局部 state 名字从而避开全局 Props 上已存在的标识符。比如我们可以这样做： ```javascript export default { props: ['visible'], data(){ return{ localVisible:false // 使用不同的名字代替原来的 visible }； }, }; ``` 之后便可以在模板或者其他地方利用 computed properties 来同步两者之间的关系： ```javascript computed:{ finalVisible(){ return this.localVisible || this.visible; } } ``` 这种方法适用于某些特殊业务需求必须维持独立控制权的情形之下。 --- ### 注意事项对于初学者而言容易忽略的一点就是在迁移旧版应用至新版库期间可能遇到兼容性挑战。特别是随着 vue 版本迭代不断推进(如由2升级到3)，部分API设计思路有所转变也可能间接影响此类现象的发生几率。因此建议始终查阅官方最新文档获取权威指导[^4]。 --- ### 总结综上所述，在面对 "[Vue Warn]" 类型的消息提醒时不必惊慌失措，按照本文介绍的方法逐一排查并妥善处理好各层面上的关系就能有效解决问题啦！ ---