首页 > 其他分享 >vue3中setup使用及其语法糖的用法

vue3中setup使用及其语法糖的用法

时间:2024-03-15 11:23:13浏览次数:25  
标签:setup vue3 语法 props 组件 属性

  1. 使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用。

  2. .setup语法糖中新增的api
    defineProps:子组件接收父组件中传来的props

defineEmits:子组件调用父组件中的方法

defineExpose:子组件暴露属性,可以在父组件中拿到

3 setup方法可以接受两个参数:props和context。

props:包含组件的props。它是响应式的,所以你可以使用Vue的toRefs或reactive将其转换为本地响应式引用。

context:是一个普通的JavaScript对象,具有以下属性:

attrs: 包含未在props中声明的属性绑定的对象。
slots: 包含组件的slots的对象。
emit: 用于触发事件的方法。

参考文献: https://www.php.cn/faq/534875.html
https://blog.csdn.net/m0_57236802/article/details/132261550

标签:setup,vue3,语法,props,组件,属性
From: https://www.cnblogs.com/zw100655/p/18074984

相关文章

  • vue2与vue3的区别
     vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用了es5的一个APIObject.definepropert()对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。1.vue2和vue3双向数据绑定原理发生了改变相比与vue2,使用proxyAPI优势有:de......
  • C#的10个语法糖
    1、集合初始化器List<string>names=newList<string>{"John","Jane","Alice"};int[]numbers={1,2,3,4,5};2、空合并运算符空合并运算符提供了一种简洁的方式来处理可能为null的值,它返回第一个非null的操作数。stringname=inputName??"Unknown&quo......
  • 搭建vue3版taro以及相关api
    1.安装Taro1.使用npm或者yarn全局安装@tarojs/cli$npminstall-g@tarojs/cli$yarnglobaladd@tarojs/cli2.项目初始化:taroinitmyApp编译运行使用Taro的build命令可以把Taro代码编译成不同端的代码,然后在对应的开发工具中查看效果。Taro编译分......
  • vue3 引入 ElementUI
     vue3使用elementUI会报错,需要引入elementUIPlus。Plus官网:https://element-plus.gitee.io/zh-CN/guide/quickstart.htmlUI官网:https://element.eleme.cn/#/zh-CN/component/installation1.安装ElementUIPlusnpminstallelement-plus--savepackage.json检查。......
  • springboot3+vue3(十一)springboot多环境开发
    在开发中我们往往会遇到,本地环境、测试环境、生产环境分别一套配置。如数据库连接,端口号等配置各不相同的问题。 1、多文件配置    2、多文件分组配置如果配置文件有很多的配置信息几百行的情况,为了方便维护我们可以根据功能的情况进行分组拆分。如:服务器相关配......
  • 3-1-Linux终端介绍、Shell提示符、Bash基本语法
    3.1.1登录Linux终端两种终端仿真器:1.GNOME桌面的 GNOMETerminal2.KDE桌面的Konsole Terminal远程连接终端工具:Xshell,CRT,Putty,MobaXterm例1:通过tty命令看到当前所属打开的第几个虚拟终端注:shift+ctrl+N快速打开一个......
  • jinja2模块模板语法 django基础
    jinja2去数据库中获取数据,传递给HTML页面,借助于模板语法发送给浏览器还能帮你简单方便的操作字典去后端获取数据库中数据展示到前端页面importpymysqldefget_user(env):去数据库中获取数据,传递给HTML页面,借助于模板语法发送给浏览器还能帮你简单方便的操作字典......
  • vue3 瀑布流 vue-masonry使用方法
    npminstallvue-masonry--savemain.js文件中引入import{VueMasonryPlugin}from"vue-masonry";app.use(VueMasonryPlugin)在页面中使用<divv-masonrytransition-duration="0.3s"item-selector=".item"......
  • Java基础语法五
    面向对象基础(1)对象是什么(2)对象在计算机中的执行原理每次newStudent(),就是在堆内存中开辟一块内存区域代表一个对象新对象s1变量里面记住的是新对象的堆内存地址,也就是说s1是一个引用变量注:调用每个对象的变量 是 调用每个对象在堆内存存储的变量值        ......
  • C++ error C2143: 语法错误: 缺少“;”(在“*”的前面)
    errorC2143编译错误但是,我在官网的例子上没有找到我所遇见的问题!在此记录一下,问题代码如下:1classtestA1;2classworkclass3{4public:5explicitworkclass();6virtual~workclass();7private:8intM_INT;9......