简析Vue3的setup函数(入口点)

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

简析Vue3的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>
登录后复制

【相关推荐:vue.js视频教程】

以上就是简析Vue3的setup函数(入口点)的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:uniapp静态文件动态添加图片不显示怎么回事
下一篇:火狐浏览器怎么开启javascript

发表评论

关闭广告
关闭广告