脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3:setup的两个注意点

vue3:setup的两个注意点详解

 更新时间：2021年10月09日 15:02:35   作者：公孙元二  
这篇文章主要介绍了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个具名插槽

在这里插入图片描述

在这里插入图片描述

总结

在这里插入图片描述

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

您可能感兴趣的文章:

相关文章

  • Vue实现红包雨小游戏的示例代码

    Vue实现红包雨小游戏的示例代码

    红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏，文中的示例代码讲解详细，需要的可以参考一下
    2022-01-01
  • 如何在 Vue.js 中使用第三方js库

    如何在 Vue.js 中使用第三方js库

    本篇文章主要介绍了如何在 Vue.js 中使用第三方js库，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 解决vue A对象赋值给B对象,修改B属性会影响到A的问题

    解决vue A对象赋值给B对象,修改B属性会影响到A的问题

    今天小编就为大家分享一篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • v-for中动态校验el-form表单项的实践

    v-for中动态校验el-form表单项的实践

    在项目开发中，我们经常会遇到表单保存的功能，本文主要介绍了v-for中动态校验el-form表单项的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
    2022-05-05
  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    在Vue 3.0中,与2.0版本相比有一定的差别,最明显的就是缺少了build、config文件夹,下面这篇文章主要给大家介绍了关于vue3中vue.config.js配置及注释的相关资料,需要的朋友可以参考下
    2022-08-08
  • VUE常见知识疑点问题总结

    VUE常见知识疑点问题总结

    这篇文章主要介绍了VUE常见知识疑点问题总结,详细介绍了vue.js @click和v-on:click有什么区别,v-on和v-bind的区别,通过本文可以认识Vue的export、export default、import的详细介绍,感兴趣的朋友一起看看吧
    2024-02-02
  • vue输入框中输完后光标自动跳到下一个输入框中的实现方法

    vue输入框中输完后光标自动跳到下一个输入框中的实现方法

    最近在工作中遇到了些问题,总结下分享给同样遇到这个问题的朋友,这篇文章主要给大家介绍了关于vue输入框中输完后光标自动跳到下一个输入框中的实现方法,需要的朋友可以参考下
    2023-03-03
  • Vue 多选框所选数量动态变换Box的高度

    Vue 多选框所选数量动态变换Box的高度

    在Web开发中,使用Vue.js框架可以通过ref属性、v-model指令和计算属性等特性实现元素高度的动态调整,文章详细介绍了如何利用Vue的功能根据多选框的选择数量动态改变元素的高度,并通过多个示例展示其应用
    2024-09-09
  • 浅析Vue.js中$emit和$on的用法和区别

    浅析Vue.js中$emit和$on的用法和区别

    在 Vue.js 中，$emit和$on方法是两个常用的方法，用于实现组件间的通信，虽然它们的名字很相似，但它们的作用和用法有所不同，本文将介绍$emit和$on方法的区别，并通过代码示例来说明它们的用法,感兴趣的朋友可以参考下
    2023-07-07
  • Vue初始化中的选项合并之initInternalComponent详解

    Vue初始化中的选项合并之initInternalComponent详解

    这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论