Vue 中 v-model 与 props 的"陷阱":为什么加了 props. 就不报错了?

起因

今天使用同事的代码的时候、看见同事代码父组件使用v-model给子组件传递参数呢,但是子组件里面用watch监听了 这个v-model传递的参数、并且赋值给一个ref了 然后又将ref这个使用v-model传递给孙子组件了 我看了半天在想为什么不直接将父组件的这个modelValue直接赋值给孙子组件的v-model呢 于是乎我按照我的想法写了

js 复制代码
const props = defineProps({
  visible: {
    default: false,
  },
});
<template>
  <div>
    <demo v-model:visible="visible" />
  </div>
</template>

当我按下保存键的一瞬间,控制台出现了一段报错

js 复制代码
v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.

我看了一眼、知道这个报错是因为props里面的数据是只读的 不能够更改,违反vue的单项数据流了 于是乎我就改了这样的写法

js 复制代码
<template>
  <div>
    <demo :visible="visible" @update:visible="($event) => (visible = $event)" />
  </div>
</template>

到这里还算正常、但是我又点开了一个组件发现 他竟然这样写不报错、我直接就一个不理解了

js 复制代码
<template>
  <div>
    <demo v-model:visible="props.visible" />
  </div>
</template>

Vue 如何区分模板中的 props 和普通变量

Vue 编译器会建立完整的作用域图谱,包含:

  • 当前组件的 setup() 返回的变量
  • defineProps 定义的 props
  • defineEmits 定义的事件
  • 从父组件继承的 attributes
  • 通过 useAttrs() 访问的属性

当遇到一个变量引用时,Vue 按以下顺序解析:

  1. 本地声明的响应式变量ref/reactive 等)
  2. props 属性 (通过 defineProps 声明)
  3. 上下文属性 (如 slots, attrs
  4. 全局属性 (如 $router, $store

那么我自己的理解的就是你加props和不加props都会找到props里面的数据啊 为什么加了props就报错了 不加就报错了,于是乎我自己就想找到原因

原因

这里其实存在一个显式访问和隐式访问的概念 例如下方代码

js 复制代码
<script setup>
import { ref } from 'vue'
const count = ref(0)
const props = defineProps(['message'])
</script>

<template>
  <div>
    {{ count }} <!-- 本地变量 -->
    {{ message }} <!-- props -->
    {{ props.message }} <!-- 显式props访问 -->
  </div>
</template>

他其实会编译成

js 复制代码
    _ctx.count,        // 直接访问setup变量
    _ctx.message,      // 自动解析为props
    _ctx.props.message // 显式props访问

图例:

所以在这里就出现了一个不同的解析情况 直接使用visible vue是能直接解析出来引用的是props里面的数据 但是 v-model语法糖会编译成 @update:visible=" <math xmlns="http://www.w3.org/1998/Math/MathML"> e v e n t = > ( v i s i b l e = event=>(visible= </math>event=>(visible=event)" 这里直接报错了 props 里是只读的 但是如果你直接写props.visible的话 他是显式访问、vue就知道他是用的props里面的他就会解析成 "@update:visible": ( <math xmlns="http://www.w3.org/1998/Math/MathML"> e v e n t ) = > e m i t ( " u p d a t e : v i s i b l e " , event) => emit("update:visible", </math>event)=>emit("update:visible",event)

这样一个小小的问题困扰到我现在、从摸不着头脑到现在彻底搞明白,几个小时过去了、不容易、总算搞明白了、如果搞不懂今天我绝对睡不好觉,以上写的如有问题请大佬提出、小弟洗耳恭听。

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript