vue3-setup的两个注意点

最新推荐文章于 2023-05-04 11:54:15 发布
最新推荐文章于 2023-05-04 11:54:15 发布
阅读量297 收藏 3
点赞数 2
分类专栏： 个人笔记/备忘录 vue3 文章标签： html html5 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/120661268
版权

在vue2中

父组件传属性给子组件
在这里插入图片描述
子组件接收属性

在这里插入图片描述
在这里插入图片描述

如果没有接收，则需要在$attrs里才能收到，缺点是没有对类型作限制，以及使用的时候名字比较长
在这里插入图片描述

在这里插入图片描述
使用的时候名字比较长
在这里插入图片描述

vue2，父组件在子组件里使用插槽
在这里插入图片描述

在这里插入图片描述

打印插槽里的内容

在这里插入图片描述
如果父组件使用了子组件2个插槽
在这里插入图片描述
在这里插入图片描述
父组件在子组件使用具名插槽

在这里插入图片描述

在这里插入图片描述

在vue3中

setup的注意点

在这里插入图片描述

setup生命周期在beforecreated之前

在这里插入图片描述
在这里插入图片描述

setup可以拿到两个参数，props和context

给子组件传2个属性
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打印context
在这里插入图片描述

在这里插入图片描述

context.attrs

与vue2类似，如果只声明部分，则剩下的在attrs属性里面
在这里插入图片描述

在这里插入图片描述

context.emit

给子组件添加监听事件
在这里插入图片描述
在这里插入图片描述

context.slot

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

如果传一个具名插槽
在这里插入图片描述
或者(推荐这种)
在这里插入图片描述
打印
在这里插入图片描述
如果传2个具名插槽
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

公孙元二
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
setup的两个注意点
richest_qi的博客
03-17 864
setup的执行时机，setup在beforeCreate之前执行一次，this为undefined。 main.js import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app') App.vue <template> <HelloWorld/> </template> <script> import HelloWorld
setup函数的两个注意点
Langlous2000817的博客
08-20 103
attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。1.会在beforeCreate之前执行一次，此时this是undefined。（1）props:值为对象，包含：组件外部传递过来且组件内部声明接收了的属性。emit :分发自定义事件的函数，相当于this.$emit。slots:收到的插槽内容,相当于this.$slots。（2）context：上下文对象。
vue3-class-component
04-08
7. **Setup 函数集成**：虽然 Vue3-Class-Component 提供了类组件的写法，但也可以与 Vue 3 的 setup 函数集成，结合使用两种组件风格的优点。 8. **安装步骤**：根据描述，首先需要运行 `yarn install` 来安装项目...
Vue3-demo 示例代码
最新发布
10-08
`setup` 函数接收两个参数：`props` 和 `context`，它们分别提供了组件接收到的属性和上下文信息。 4. **模板语法更新**： Vue3 的模板语法也有所更新，比如现在可以使用 `.value` 访问 `ref` 对象的值。此外，还...
vue3-2个多小时的学习.docx
03-09
这两个工具简化了数据绑定和状态管理，使得数据变化能够自动触发视图更新。 Vue3 中的VueX 依然作为状态管理库存在，但其结构有所调整。VueX 4 提供了模块化和更简洁的API。在这里，我们了解到如何组织VueX的store...
vue3-zhihu项目
02-22
在vue3-zhihu-project中，可能看到如何集成和配置这两个库来实现应用的导航和状态维护。 通过分析和实践vue3-zhihu-project，开发者可以全面掌握Vue3的新特性和最佳实践，为自己的项目带来更高的开发效率和更好的...
hello-vue3-vite
04-09
【Vue.js 框架与 Vite 构建工具详解】 Vue.js，简称Vue，是由尤雨溪开发的开源前端框架，它...这个项目为初学者和有经验的Vue开发者提供了一个实践Vue 3与Vite集成的起点，帮助他们更好地理解和应用这两个强大的工具。
Vue3笔记 - setup的两个注意点
xiaoxiannvh的博客
12-20 195
6.setup的两个注意点 setup执行的时机 在beforeCreate之前执行一次，this是undefined。 setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 context：上下文对象 attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。 slots: 收到的插槽内容, 相当于 this.$slots。 emit: 分发自定义事件的函数, 相当于 this.$emit。
为什么props接收的值为undefined
weixin_43239880的博客
10-21 6789
在项目中,我们会经常使用到props传值,经常是由父组件传递给子组件一个值,然后我们在子组件中想去使用这个props接收的值,但是在created和mounted中打印,却发现是初始值或者为undefined,并不是我们在父组件中发送异步请求拿到的那个值.但是通过setTimeout设置了一定的时间之后,我们又能拿到对应的值.这是什么情况呢?解决4：使用v-if来判断,这样子在子组件中的created中就可以将有值的transData打印出来了。请求回来的, 请求的这个过程是需要时间的，但是。
vue3在 setup 中使用 props
热门推荐
空晓天
11-17 1万+
vue3在 setup 中使用 props 记录学习和开发中遇到的问题 之前我尝试在 setup 中使用 props 是这样的 export default defineComponent({ setup(props: any) { console.log(props.id) // 输出 undefined } }) 然而 却输出 undefined ，通过思考和查阅资料，与 vue2 做对比，少了 props 声明一步 加上声明就可以了 export default
14.setup.attrs
qq_34820433的博客
05-04 696
PS：发现 attrs 可以识别事件属性 clickTest，普通属性 size，但不能识别 props 属性；PS：所以，使用 attrs 来代替 Props 显示，那么 return 时要注意响应式问题；PS：当我们注释掉 Props 声明，那么 attrs 就识别了，所以，他们是分开识别的；2. 首先，context 含义为：结合上下文获取相关属性的内容，并且都是非响应式；3. 我们在父组件调用子组件时，传递不同的属性和事件，看看 attrs 是否能识别；
vue3学习 setup，props，context
weixin_48789376的博客
07-28 8159
setup 函数 1、执行时机在 beforeCreate 和 created这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次 2、在setup中没有this , 打印返回undefined vue3里的生命周期： ① 可以和vue2里一样选项式写法，和setup平级， beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted ② 可以在setup里
Vue3中setup()的两个参数
m0_56219678的博客
02-09 4274
Vue3中setup()的两个参数
前端之vue3的setup和setup的2个的形参、响应式页面
weixin_46372074的博客
05-24 1356
setupsetupsetup总结ref函数 setup setup是个函数, 包含数据、方法等，是组合api的“舞台”。 setup返回值： 1.对象，其中的属性、方法都可以在模板中直接使用 2.渲染含数（了解就好） export default { name: "App", components: {}, setup() { // 非响应式变量 let name = "欧西里斯"; let age = 18; function sayHello() {
vue3 setup踩坑
Stars_in_rain的博客
08-16 1462
vue3 setup踩坑 1.setup定义变量使用要ref()，要进行引用 import {ref} from 'vue' 注意ref放在{}里，否则会报错没有兼容的调用签名 2.变量的赋值要使用.value let bedId = ref(1) function selectBed(id) { bedId.value= id } 3.setup的值渲染到vue上不生效，仔细检查过发现定义的bedId的值没有传给vue的原因是没有return bedId s
四、【Vue3】——setup不得不说的两个注意点
yifei1234567的博客
04-01 1844
在Vue3中setup被称为组合式API表演的舞台，可见其重要性与地位，在小编第一篇中浅谈过setup的使用，这节可以进阶学习一下setup中两个注意点：执行时机以及其参数。
vue3 setup的两个参数
09-06
Vue3 的 `setup` 函数接受两个参数： 1. `props`：是一个响应式的对象，包含了从父组件传递过来的属性。可以通过解构赋值的方式来使用这些属性。 2. `context`：是一个包含了一些实用方法和属性的对象，可以用于与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值