关于vue3中setup函数的使用
作者:黑猫几绛 发布时间:2024-06-05 09:16:16
标签:vue3,setup,函数
概述
一、 初识setup函数
组件中所用到的:数据、方法等等均要配置在setup中,这也就意味着在Vue2中写的data、methods在这里都不再推荐使用。
这样的配置让对象式编程趋近于了函数式编程。
<script>
export default {
name: 'App',
// 最为原始的对象写法是这样,但是通过es6我们可以简写
// setup: function(){}
setup () {
// 数据
let name = '黑猫几绛'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name},我今年${age}了`)
}
}
}
</script>
了解过Vue2响应式原理的话你可能会有疑问说,在这个地方name和age并不是响应式的。
的确如此,在这里我们仅仅是测试一下setup中是否可以放入数据与方法,响应式在后面的专栏文章中介绍。
如果此时未了解响应原理,可以看看我以前的一篇文章,这篇文章里有详细介绍
二、 关于setup的返回值
仅仅存放数据与方法还不够,我们需要将他们作为返回值返回出去,在模板中便可以直接使用。
<template>
<h1>我叫{{name}},我今年{{age}}了</h1>
</template>
<script>
export default {
name: 'App',
// 最为原始的对象写法是这样,但是通过es6我们可以简写
// setup: function(){}
setup () {
// 数据
let name = '黑猫几绛'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name},我今年${age}了`)
}
return{
name,
age,
sayHello
}
}
}
</script>
在概述里面还介绍了setup的另外一种返回值,即返回一个渲染函数,这个函数的方法有一点像React.creatElement,可以自定义渲染的内容。
<script>
import {h} from 'vue'
export default {
name: 'App',
setup () {
// 在页面上渲染出一个h1标签
return ()=> h('h1', '黑猫几绛')
}
}
</script>
三、 关于setup的参数
# App.vue
<template>
<Demo msg="hello" name="world" @hello="changeId">
<template v-slot:test>
摸鱼
</template>
</Demo>
</template>
# Demo.vue
<script>
export default {
name:'Demo',
props:['msg'],
setup(props,context){
console.log(props);
console.log(context.attrs);
console.log(context.slots);
console.log(context.emit);
}
}
</script>
来源:https://blog.csdn.net/flow_camphor/article/details/120762341
0
投稿
猜你喜欢
- 给定一个带有列"BoolCol"的DataFrame,如何找到满足条件"BoolCol" == Tr
- 表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容
- 由于想要使用pycharm连接Window子系统Ubuntu进行开发,找了很多教程都不够详细,花了点儿时间,最后配置成功。将pycharm连
- 一、HandlerSocket是什么?HandlerSocket是akira higuchi写的一个MySQL的插件。以MySQL Daem
- Python 提供了两个级别访问的网络服务。低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访
- 用过软件的朋友都知道,进度条是一个优秀软件的重要组成部分。它的存在能够使用户及时掌握程序的运行进度,确认应用程序正常工作。可是ASP中似乎没
- SQL,数据分析岗的必备技能,你可以不懂Python,R,不懂可视化,不懂机器学习。但SQL,你必须懂。要不然领导让你跑个数据来汇.....
- 一、前言该测试功能是Linux产测软件的一个子功能,主要涉及:140行代码PySide2的Event、信号和槽、QLabel,QWidget
- RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传
- Reference:https://www.tensorflow.org/install/migrationtensorflow 更新到1.
- 下面是我整理的监控sql server数据库,在性能测试过程中是否出现死锁、堵塞的SQL语句,还算比较准备,留下来备用。调用方法:选中相应的
- 前言因为一些懂得都懂的原因,我的父母对于我电脑上的文件内容特别感兴趣。为了防止信息泄露,我连夜用Python做了一个文件加密器,防止我的重要
- JavaScript: <script type="text/javascript"> var level1
- 安装完 Oracle11g 之后,想打开自带的 SQL Plus 来学习,然后按照提示用 sys 用户来连接数据库,可输了好几次都提示一个错
- 阅读上一篇:WEB2.0网页制作标准教程(11)不用表格的菜单辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们
- 分形,具有以非整数维形式充填空间的形态特征。通常被定义为“一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后
- requests模块是一个用于访问网络的模块,其实类似的模块还有很多,不在一一在这里解释。这么多的相似的模块为什么都说只有这个好用呢,因为他
- 最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是
- 你甚至可以在一行内将多个值赋值给多个变量>>> a , b = 45, 54>>> a45>>
- virtualenv简介在开发Python应用程序的时候,我们的系统上通常只会安装一个Python版本:例如 3.7。所有使用 pip 安装