vue3 之 组合式API—模版引用

已于 2024-02-05 09:59:55 修改
阅读量179 收藏
点赞数 3
分类专栏： vue3 文章标签： javascript vue.js ecmascript
于 2024-02-05 09:35:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42268006/article/details/136036035
版权
模版引用的概念

通过ref标识获取真实的dom对象或者组件实例对象

如何使用（以获取dom为例 组件同理）

1️⃣调用ref函数生成一个ref对象
2️⃣通过ref标识绑定ref对象到标签

dom中使用
在这里插入图片描述
父组件中可以看到打印出来proxy里面只有一个属性，其他属性看不到
在这里插入图片描述
为什会这样？
默认情况下在

子组件通过defineExpose暴露出去，可以看到父组件打印出来的proxy中已经有暴露出来的属性了
在这里插入图片描述

总结

1.获取模版引用的时机是什么？
组件挂载完毕

2.defineExpose编译宏的作用是什么？
显式暴露组件内部的属性和方法

jiojio冲冲冲
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3中的组合式API的使用
qq_72760247的博客
01-12 2069
Vue3中的组合式API的使用
vue3 配置自动导入API和组件
好川的博客
09-25 6152
不用 import 引入， 打包时会默认加上
Vue3 中组件的使用（上）
热门推荐
weixin_62897746的博客
02-24 2万+
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 组件就相当于页面的零件，当做正常的标签使用，不过能够进行自定义的数据传输和事件监听。 组件内也能使用其他的组件，任意处都能够使用。 一个 Vue 组件在使用前需要先被 “注册”，这样 Vue 才能在渲染模板时找到其对应的实现；组件注册有两种方式：全局注册、局部注册
技术向：如何在Vue 3的组合式组件中调用自定义组件的方法？
weixin_50876380的博客
11-14 385
拓云智能在Vue 3的组合式组件中，可以使用ref来引用自定义组件，并通过.value来访问组件实例，从而调用自定义组件的方法。在上述示例中，我们首先使用ref创建了一个引用，然后在模板中将自定义组件绑定到这个引用上。接着，我们在setup函数中定义了一个方法，该方法通过来访问自定义组件实例，并调用了自定义组件的方法。需要注意的是，在组合式组件中，我们需要使用.value来访问ref引用的实际值。
最新Vue3组合式api的一些方法
weixin_63760185的博客
01-16 969
修改名字
实现基于Vue3组合式API的登陆系统
04-07
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架，是一个构建数据驱动的 web 界面的库。...vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法。通过cmd命令框输入：node -v 可查看是否安装。
浅谈Vue3.0新版API之composition-api入坑指南
10-15
Vue3.0带来了全新的Composition API，这是一个革命性的变化，旨在提高代码的组织性和可重用性。在Vue2.x中，我们通常使用Option API，将数据、方法、生命周期钩子等分散在不同的选项中。然而，随着项目复杂度的增加...
使用Vue Composition API写出清晰、可扩展的表单实现
10-15
Vue Composition API 的核心思想是将组件的数据、方法、计算属性等逻辑拆分为单独的函数，称为“组合函数”或“组合式”，并允许在需要的地方按需引入。这种方式使得代码更加模块化，避免了 Options API 中的数据和...
VUE3-ts.docx
03-31
4. **组合API**：Vue3.0 引入了类似 React Hooks 的组合API，主要由 `setup` 函数构成。在这个函数中定义的变量和方法需要通过 `return` 显式暴露给外部使用。 5. **自定义渲染API**：Vue3.0 提供了更多的底层访问...
Vue项目实战：基于Vue 3和Element Plus的电商后台管理系统.txt
01-08
旨在通过Vue 3和Element Plus这两个流行的前端技术，来构建一个完整的电商后台管理系统，涵盖了项目的需求分析、技术选型、环境搭建、功能实现、接口对接、项目优化等内容，以及Vue 3的新特性、组合式API、响应式...
Vue3学习记录（四）--- 组合式API之组件注册和组件数据交互
最新发布
weixin_45092437的博客
03-04 1301
一个创建好的单文件组件（SFC）首先要进行注册，然后才能被别的组件使用。注册方法按照作用域区分为两种：全局注册和局部注册。全局注册需要通过`main.js`中利用Vue应用实例中提供的component()。局部注册需要在父组件中显式的导入要使用的组件。父组件想要向子组件传递数据，需要借助`Props`来实现。子组件向父组件传递数据需要借助自定义事件实现。父子组件之间可以通过`v-model`和`defineModel()`宏方法实现数据在父子组件之间的双向绑定。
vue3基础入门系列--②组合式API方式定义响应式数据及自动引入配置
白云苍狗
04-03 691
在vue3中,组合式API的写法,如何定义响应式数据,怎么自动化导入API
6_组合式API
JRealcs的博客
10-14 604
hook 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。类似于 vue2 中的mixin// 说白了就是函数的封装、复用 // hooks/useXxx.js 文件 export default function() {// 一些公共的逻辑 return xxx } // 组件文件 import useXxx from "@/hooks/useXxx.js" setup() {
VUE 3——4：组件内部的组合式 API
dangfulin的博客
04-16 2918
复用与组合对工程化的大项目更有意义，因此我们提前介绍了如何创建 Vue 3 项目，简单创建并使用了一些 SFC，接下来就来介绍如何实现 SPC 的复用与组合。
vue3 组合式API composition 简单使用
jyn15159的博客
03-12 2270
composition api 组合式API 官网文档 通过创建 Vue 组件，可以将界面中重复的部分连同其功能一起提取为可重用的代码段。 使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。 这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，必须不断地“跳转”相关代码的选项块。 如
Vue3自动引入组件，组件库
m0_56344602的博客
05-16 1万+
在做vue3项目中时，每次使用都需要先进行引入，用ts的还好，会有爆红提示，如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入，就会很浪费时间，偶然发现一款好用的组件可以帮助我们很好的解决这种问题。...
【Vue3】子组件引入与注册-组合式API和选项式API之间有区别
m0_61486963的博客
09-01 1852
【Vue3】子组件引入与注册-组合式API和选项式API之间有区别
Vue3新特性 组合式Api
孤傲的博客
10-15 7694
setup - 组件内使用 Composition API 的入口点 setup 作为组合式 API 的入口点，也就是说，组合式 API 都必须只能在 setup 中使用 <template> <div> <h1>setup - 组件内使用 Composition API 的入口点</h1> <p>{{username}}</p> </div> </template> <scr
Vue3入门
weixin_49405038的博客
05-12 835
Vue3带来的新变化 性能提升 首次渲染更快 diff算法更快 内存占用更少 打包体积变小 更好的Typescript支持 Composition API （重点） 在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题 3. 破坏性语法更新 vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代） 过滤器filter
vue3组合式Api
01-18
Vue 3的组合式API是一种新的API风格，它使开发者能够更好地组织和重用组件逻辑。下面是一个关于Vue 3组合式API的例子： ```vue <template> <div> <h1>解构响应式对象数据</h1> <p>Username: {{ username }}</p> <p>Age: {{ age }}</p> </div> </template> <script> import { reactive, toRefs } from "vue"; export default { name: "解构响应式对象数据", setup() { const user = reactive({ username: "张三", age: 10000, }); return { ...toRefs(user) }; }, }; </script> ``` 在这个例子中，我们使用了Vue 3的`reactive`函数将一个普通对象`user`转换为响应式对象。然后，我们使用`toRefs`函数将响应式对象的每个属性转换为`ref`，以便在模板中使用。 通过这种方式，我们可以在模板中直接使用`username`和`age`属性，并且它们会自动响应式地更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiojio冲冲冲

能帮助你是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值