前端vue3 setup使用教程
vue3 中新增了 setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题。即 vue 中 data、computed、methods、watch 等内容非常多以后,同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中“相隔甚远”,看代码时,经常需要根据 data 中的数据去搜索找到对应的 methods 方法,上下跳跃查看代码,非常不方便。而在 setup 中,则可以把 data 中的数据和 methods 方法写在相临的位置,方便查看和维护。
1、简单使用
先简单写一下看看效果
笔者这里使用新建的 vue3 项目,直接在 App.vue 上进行修改
<template> <div>{{name}}</div> </template> <script> export default { setup() { return { name: "泪眼问花花不语,乱红飞过秋千去" } } } </script>
原来写在 data 中的 name,在 setup 中需要 return 返回
运行效果
2、修改 setup 中的变量值
先看下面代码,再说在 setup 中如何修改
<template> <div> {{name}} <button @click="change">修改</button> </div> </template> <script> export default { setup() { let name = "泪眼问花花不语,乱红飞过秋千去" function change() { name = "人生自是有情痴,此恨不关风与月" } return { name, change } } } </script>
按照常规逻辑,修改 setup 中的 name,会自然地写出上面的代码
但是这段代码是不能完成 name 值的修改的,看运行效果
为什么 name 值没有改变呢?因为上面代码中 name 是非响应式的
如果想要修改 name 值,就需要把它改成响应式的,代码如下
<template> <div> {{name}} <button @click="change">修改</button> </div> </template> <script> import { ref } from 'vue' export default { setup() { let name = ref("泪眼问花花不语,乱红飞过秋千去") function change() { name.value = "人生自是有情痴,此恨不关风与月" } return { name, change } } } </script>
使用 ref 对 name 进行包装
修改时使用 变量名.value 的语法
运行效果
除了使用 ref 外还可以使用 reactive ,二者都可以将原始数据类型转换成一个带有响应式特性的数据类型
ref 和 reactive 有什么区别,ref 一般处理基本类型;reactive 处理复杂的数据类型
reactive 使用代码
<template> <div> {{nameObj.name}} <button @click="change">修改</button> </div> </template> <script> import {reactive} from 'vue' export default { setup() { let nameObj = reactive({name: '今年花胜去年红。可惜明年花更好,知与谁同'}) function change() { nameObj.name = "离愁渐远渐无穷,迢迢不断如春水" } return { nameObj, change } } } </script>
运行效果
3、setup 形式下的父子组件通信
代码写成 setup 形式,如何实现父子组件通信,下面介绍
3.1、父传子
在 components 目录下新建 Article.vue 作为子组件
Article.vue 内容
<template> <div> {{msg}} {{info}} </div> </template> <script> export default { props:['msg'], setup(props) { console.log(props.msg) return { info:props.msg } } } </script>
在 setup 方法内使用 props 来接收父组件传过来的数据
App.vue 为父组件
在 App.vue 中引入 Article.vue
<template> <div> <Article :msg="name"></Article> </div> </template> <script> import Article from '@/components/Article.vue' export default { components: { Article }, setup() { return { name: '渐行渐远渐无书,水阔鱼沉何处问' } } } </script>
运行效果
3.2、子传父
3.2.1、子组件调用父组件方法
Article.vue 内容
<template> <div> {{msg}} <button @click="sendToParent">子组件向父组件传递数据</button> </div> </template> <script> export default { props:['msg'], setup(props, content) { console.log(props.msg) function sendToParent() { content.emit('change') } return { sendToParent } } } </script>
使用 setup 方法中 content 参数中的 emit
App.vue 内容
<template> <div> <Article :msg="name" @change="changeName"></Article> </div> </template> <script> import Article from '@/components/Article.vue' export default { components: { Article }, setup() { function changeName() { alert('父组件事件被调用') } return { name: '渐行渐远渐无书,水阔鱼沉何处问', changeName } } } </script>
运行效果
3.2.2、子组件向父组件传递数据
子组件向父组件传递数据,父组件修改数据
Article.vue 内容
<template> <div> {{msg}} <button @click="sendToParent">子组件向父组件传递数据</button> </div> </template> <script> export default { props:['msg'], setup(props, content) { console.log(props.msg) let newName = '群芳过后西湖好,狼籍残红。飞絮濛濛。垂柳阑干尽日风' function sendToParent() { content.emit('change', newName) } return { sendToParent } } } </script>
App.vue 内容
<template> <div> <Article :msg="name" @change="changeName"></Article> </div> </template> <script> import Article from '@/components/Article.vue' import {ref} from 'vue' export default { components: { Article }, setup() { let name = ref('渐行渐远渐无书,水阔鱼沉何处问') function changeName(msg) { name.value = msg } return { name, changeName } } } </script>
App.vue 中的 name 要修改,所以使用 ref 包装
运行效果
4、setup 中使用生命周期函数
在 setup 里,生命周期钩子前面加上 “on” 来访问组件的生命周期钩子
setup 是围绕 beforeCreate
和 created
生命周期钩子运行的,所以不需要显式地定义它们
setup 内部调用生命周期钩子
代码示例
<template> <div></div> </template> <script> import { onBeforeMount, onMounted } from "vue" export default { setup() { onBeforeMount(()=>{ console.log('onBeforeMount') }) onMounted(()=>{ console.log('mouted') }) return {} } } </script>
运行效果
以上就是前端vue3架构setup使用教程的详细内容,更多关于vue3 setup教程的资料请关注猪先飞其它相关文章!
原文出处:https://blog.csdn.net/wsjzzcbq/article/details/123003859
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
iPhone6怎么激活?两种苹果iPhone6激活教程图文详解
iPhone6新机需要激活后才可以正常使用,那么对于小白用户来说,iPhone6如何激活使用呢?针对此问题,本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法,希望本文能够帮助到大家...2022-09-14- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程,各位想知道具体制作方法的使用者们,大家就快来看一看小编给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程,各位想知道绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程,各位想知道具体绘制方法的使用者们,那么各位就快来跟着小编来看看...2016-09-14
- 支付宝支付在国内算是大家了,我们到处都可以使用支付宝了,下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程,各位想知道具体制作步骤的,那么下面就来跟着小编一起看看吧。 ...2016-09-14
- 今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程,各位想知道具体绘制步骤的使用者们,那么下面就快来跟着小编...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程,各位想知道具体绘制方法的使用者们,那么下面就来看一下小编给大家分...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程,各位想知道具体制作方法的使用者们,那么大家就快来看一看教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程,各位想知道具体后期处理步骤的使用者们,那么大家就快来跟着小编来看...2016-10-02
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程,各位想知道具体处理步骤的,那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 联合索引又叫复合索引。对于复合索引:Mysql从左到右的使用索引中的字段,一个查询可以只使用索引中的一部份,但只能是最左侧部分。例如索引是key index (a,b,c). 可以支持a | a,b| a,b,c 3种组合进行查找,但不支持 b,c进...2015-11-24
- 这篇文章主要给大家介绍的是关于Lua语言新手入门的简单教程,文中通过示例代码一步步介绍的非常详细,对各位新手们的入门提供了一个很方便的教程,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。...2020-06-30
- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作隔离区聊天背景的教程,各位想知道具体方法的,那么下面就快来跟着小编一起看一看吧。 给各位美图秀...2016-09-14