vue.js

关注公众号 jb51net

关闭

首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3:setup的两个注意点

vue3:setup的两个注意点详解

2021-10-09 15:02:36 作者：公孙元二

这篇文章主要介绍了vue3.0中setup的两个注意点，本文通过两种用法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

在vue2中

父组件传属性给子组件

在这里插入图片描述

子组件接收属性

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

使用的时候名字比较长

在这里插入图片描述

vue2，父组件在子组件里使用插槽

在这里插入图片描述

在这里插入图片描述

打印插槽里的内容

在这里插入图片描述

如果父组件使用了子组件2个插槽

在这里插入图片描述

在这里插入图片描述

父组件在子组件使用具名插槽

在这里插入图片描述

在这里插入图片描述

在vue3中

setup的注意点

在这里插入图片描述

setup生命周期在beforecreated之前

在这里插入图片描述

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

给子组件传2个属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打印context

在这里插入图片描述

在这里插入图片描述

context.attrs

与vue2类似，如果只声明部分，则剩下的在attrs属性里面

在这里插入图片描述

在这里插入图片描述

context.emit

给子组件添加监听事件

在这里插入图片描述

在这里插入图片描述

context.slot

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如果传一个具名插槽

在这里插入图片描述

或者(推荐这种)

在这里插入图片描述

打印

在这里插入图片描述

如果传2个具名插槽

在这里插入图片描述

在这里插入图片描述

总结

在这里插入图片描述

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章: