setup函数是什么，用法是怎样的呢？
导读：这篇文章主要为大家详细介绍了setup函数是什么，用法是怎样的呢？的内容，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助，接下来就跟随小编一起来学习吧。 Composi...
这篇文章主要为大家详细介绍了setup函数是什么，用法是怎样的呢？的内容，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助，接下来就跟随小编一起来学习吧。Composition Api
setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。
调用时机：
setup函数会在beforeCreate钩子之前被调用
返回值
如果setup返回一个对象，则对象的属性可以在组件模板中被访问
参数
接收俩个参数
setup.vue
template>
div>
setup
/div>
/template>
script>
export default{
setup(){
console.log('setup.....')
}
,
beforeCreate() {
console.log('beforeCreate...')
}
,
}
/script>
style>
/style>
登录后复制 app.vue
template>
comp-setup>
/comp-setup>
/template>
script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from './components/setupview'
export default {
name: 'App',
components: {
CompSetup,
}
}
/script>
style>
/style>
登录后复制 接收参数：
setup.vue
template>
div>
{
{
name }
}
p>
{
{
user.username }
}
/p>
/div>
/template>
script>
export default{
//setup不能访问this
//可以接收参数
setup(props,context){
// console.log('setup.....')
//这种返回的数据不具有响应式
// let name='tom'
// return {
// name,
// }
return {
name:'tom',
user:{
username:'admin',
password:'123'
}
}
}
,
beforeCreate() {
// console.log('beforeCreate...')
}
,
props:{
msg:String
}
}
/script>
style>
/style>
登录后复制 app.vue
template>
comp-setup msg="welcome">
/comp-setup>
/template>
script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from './components/setupview'
export default {
name: 'App',
components: {
CompSetup,
}
}
/script>
style>
/style>
以上就是关于setup函数是什么，用法是怎样的呢？的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，想要了解更多，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： setup函数是什么，用法是怎样的呢？
本文地址： https://pptw.com/jishu/652498.html