vue3 setup script 变量冲突问题

最新推荐文章于 2025-03-01 13:00:00 发布
最新推荐文章于 2025-03-01 13:00:00 发布
阅读量974 收藏
点赞数
分类专栏： vue3 文章标签： vue.js javascript vue3 element plus element-plus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_meng/article/details/122651559
版权

在搭建vue3+element-plus项目时，有一个登陆表单，我尝试用vue3的setup script去完成登陆功能，在setup script中使用 const form = reactive<{username: string, password: string}>({username: '', password: ''});在template的el-form组件中的el-input无论如何都不能绑定到form.username几经排查最后发现是el-form中的ref的名字也叫form和setup中const的定义重复了这个在浏览器中是不会报错的

vue3 script setup 语法糖用了才知道有多爽 (四)
YZRHANYU的博客
03-21 1032
vue3 script setup 语法糖用了才知道有多爽 (四) script setup的分析和使用 vue3 中 script setup 和普通的 script 一起使用以及路由 useRoute,useRouter 的使用方式
如何将 Vue 3 与 TypeScript 一起使用
分享身边生活经验blog
10-14 2222
Vue 是一个令人惊叹的轻量级、渐进式前端框架。在本教程中，我们将演示如何完全使用 TypeScript 构建 Vue 应用程序。我们将通过使用基于类的组件、用于状态管理的 Vuex、生命周期钩子等构建示例应用程序，重点介绍将 TypeScript 与 Vue 结合使用的一些好处。让我们开始吧！Vue 和 TypeScript 入门如何将 TypeScript 添加到 Vue 项目中使用defineComponent使用数据使用道具计算属性方法观察者emit导入组件。
vue3.0踩坑记录
yuxinSir的博客
07-22 708
1.vue3需注意model与ref不能同名，在使用elementplus时发现el-input无法输入，查看后发现由于同名导致 2.vue3 中不再支持 extend 方法，可使用vue3中createApp挂载未挂载的组件，未挂载组件中如有使用第三方插件，需重新导入(暂不清楚其他方式) const components = [ElDropdown, ElDropdownItem, ElDropdownMenu]; const app = createApp(speedcom); components.f
vue3.0+TS+antdesgin 选择树（tree）的增删改查（简单封装）
我只是个很菜的前端
05-31 1733
vue3.0+TS+antdesgin 选择树（tree）的增删改查（简单封装）
`vue3`+`ts`+`setup`语法糖实现一个无限嵌套的`tree`组件
debug
02-07 1985
今天用`vue3`+`ts`+`setup`语法糖实现一个无限嵌套的`tree`组件
vue3 组件传值之 props 与 attrs 的区别
很多时候犯错都是在不知情的情况下发生的
11-27 698
最近在学习 vue3，整理了一些学习笔记，如果有人看到，并发现我有写的不对的地方，欢迎指正~ 用过 vue 组件传值的小伙伴都知道 props 这个属性，而 $attrs 属性可以看做 props 的加强版，用来简化 vue 组件传值，那么这两个属性具体有什么区别呢？ 先说结论，区别如下： 1、props 要先声明才能取值，attrs 不用先声明 2、props 声明过的属性，attrs 里不会再出现 3、props 不包含事件，attrs 包含 4、props 支持 string 以外的类型，
Vue 3 的 ＜script setup＞ 语法糖与 TypeScript 的深度整合
最新发布
m0_72030584的博客
03-01 530
本文学习Vue 3 的 <script setup> 语法糖与 TypeScript 的深度整合
vue3第六幕之【组合式API】setup语法糖
XSL_HR的博客
09-24 2751
关于Composition（组合式）API 中setup的相关基础知识 强烈推荐！！
Vue3.0的新语法糖-script setup
m0_67266585的博客
03-09 3665
<script setup>是vue3中新引入的语法糖，目的是简化使用Composition API时冗长的模板代码。 <script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typescript声明 props和抛出事件。 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。 更好的 IDE 类型.
vue3 尚硅谷vue3入门到实战
wk964269669的博客
07-03 1140
vue3 基础知识
Vue3.2 新特性详解——＜script setup＞ 和 ＜style＞ v-bind
web13595805947的博客
02-21 1648
Vue3.2 新特性详解——< script setup> 和 < style> v-bind 1. 前言 2. < script setup> `新特性 2.1 基本语法 2.2 顶层绑定将自动暴露给模板 2.2.1 基本使用 2.2.2 原理探究 2.3 组件的使用 2.3.1 自动的组件名推断 2.3.2 普通组件的使用 2.3.3 动态组件 2.3.4 递归组件 2.3.5 命名空间组件 2.4 props 的使用——defineProp
vue3中setup的两个参数 props，context (attrs，emit，slots)，vue3中的双向数据绑定自定义事件emit和v-model
看见小狮子没
09-20 9234
这是父组件的name：{{obj.name}}
vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
weixin_44867717的博客
09-22 3327
【代码】vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法。
＜script setup＞ 语法糖
Sengoku_Xingzi的博客
03-22 168
<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的<script>语法，它具有更多优势： 官网:单文件组件 <script setup> | Vue.js (vuejs.org) 当使用<script setup>的时候，任何在<script setup>声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用： <scrip...
狂神vue笔记（全）
sky130054的博客
09-10 3084
想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 ### 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态
变量名、函数名、形参相同的情况
qiqi_77_的博客
02-26 3648
1.  变量和函数重名时，如果变量声明未赋值，则变量名被忽略，取函数(function (a) { console.log(a); var a = 10; function a(){} }( 100 ))结果：function a(){}2.(function (a) { console.log(a); var a = 10; var a = fun...
vue3中遇到的问题
weixin_59017683的博客
09-30 2585
vue3项目中一写方法及问题总结
vue3组件通信之useAttrs
m0_52222401的博客
05-22 1069
在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中$ attrs属性与$listeners方法。子组件my-button内部可以通过useAttrs方法获取组件属性与事件.因此你也发现了，它类似于props,可以接受父组件传递过来的属性与属性值。比如:在父组件内部使用一个子组件my-button。
vue3组合式api之setup中定义变量（二）
sdad2154的博客
10-11 1572
注意：reactive对象如果是嵌套对象暴露在模板的时候，通过方法改变属性值你会发现没有任何变化这个时候就需要引入torefs。需要引入torefs 点击才会触发响应式。2）通过引入reactive（对象）1）通过引入ref（简单变量赋值）以上情况点击加减那么没有任何反应。
vue3 v-if 和 ref 冲突
09-03
关于Vue 3中v-if和ref的冲突问题，实际上并不存在直接的冲突。v-if是Vue的条件渲染指令，用于根据条件决定是否渲染特定的元素或组件。而ref是用于在Vue组件中获取对DOM元素或子组件的引用。 在Vue 3中，v-if和ref...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值