广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
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建站博客其它相关文章!
发表评论