关于vue3中setup函数的使用
短信预约 -IT技能 免费直播动态提醒
概述
一、 初识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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
