关于vue3中setup函数的使用
作者:黑猫几绛 时间:2024-06-05 09:16:16
概述
一、 初识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
标签:vue3,setup,函数
0
投稿
猜你喜欢
python GUI模拟实现计算器
2023-01-08 22:20:40
MySQL 存储过程的基本用法介绍
2024-01-20 15:56:33
简单实现jQuery轮播效果
2024-06-07 15:26:25
python多线程http压力测试脚本
2022-12-31 16:48:37
采用python实现简单QQ单用户机器人的方法
2022-06-26 03:28:40
Python绘图Matplotlib之坐标轴及刻度总结
2023-10-01 15:56:39
python实现本地批量ping多个IP的方法示例
2023-12-19 02:36:36
Python项目打包成二进制的方法
2023-11-07 05:22:02
Javascript(es2016) import和require用法和区别详解
2024-04-19 09:57:04
mysql 8.0.20 winx64安装配置方法图文教程
2024-01-27 02:09:01
python浪漫表白源码
2023-11-22 05:16:39
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2021-01-12 08:30:45
介绍Python的Urllib库的一些高级用法
2023-03-29 08:28:06
几行代码轻松实现PHP文件打包下载zip
2024-06-05 09:47:49
pytorch 限制GPU使用效率详解(计算效率)
2022-01-24 06:55:53
django项目中使用云片网发送短信验证码的实现
2021-09-20 18:35:23
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2023-09-03 23:49:13
python 合并文件的具体实例
2022-03-12 03:18:26
Jupyter Notebook运行代码无反应问题及解决方法
2023-07-21 17:38:04
PHP的SQL注入过程分析
2023-11-18 02:53:27