玉溪做网站公司,手机建站官网,网页制作工作网站,移动互联网50+互联网setup语法糖#xff1a;
一、Vue3.0 script里定义的变量、属性和方法必须 return 出来#xff0c;template中才能使用#xff1b;这样会导致在页面上变量会出现很多次。vue3.2只需在script标签中添加setup#xff0c;就可以帮助我们解决这个问题,无需再写…setup语法糖
一、Vue3.0 script里定义的变量、属性和方法必须 return 出来template中才能使用这样会导致在页面上变量会出现很多次。vue3.2只需在script标签中添加setup就可以帮助我们解决这个问题,无需再写return了。
二、不用写export default 、setup函数
三、组件只需import引入不用写components{}注册
四、不可以直接写name: xxx, 但默认name 是 组件名如Home.vue name 就是Home。
解决方案
方式一 如果想修改name可以再写一个script标签专门指定name
script langts
export default {name: Home
}
/script
script langts setup
//
/script
方式二: 使用defineOptions定义组件的name
script langts setup
import { defineOptions } from vue
defineOptions({name: Home
})
/script
方式三vite版的项目
1先安装npm i vite-plugin-vue-setup-extend插件
2在vite.config.ts里配置 以下代码
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import vueSetupExtend from vite-plugin-vue-setup-extendexport default () defineConfig({plugins: [vue(),// 配置vite-plugin-vue-setup-extend插件vueSetupExtend(),],
})
3.vue组件里修改name 再script标签上直接写 namexxx组件name就行了。
script nameHome langts setup
/script
五、新增 defineProps传参父子组件间通信 相当于接收props传参
六、新增defineEmits子组件向父组件抛出事件
七、新增defineExpose 子组件向父组件暴露属性 父组件通过ref可以获取到
八、新增内置指令 v-memo v-memo等号里的值不发生变化就不会进行更新视图。
九、v-bind 允许在css里绑定变量
可以参考我的文章 https://www.toutiao.com/article/7302322534442451467/ Home/index.vue的代码: templatediv classhomedivstate.count : {{ state.count }}/divdivstate.msg : {{ state.msg }}/divbutton clickstate.addCountstate.Count/buttonbutton clickstate.addChildAge子组件的clAge/buttonbr!-- 子组件ChildA --ChildArefChildARef:msgstate.msg:num-arr[1,2,3,4,5]addMsgstate.addMsgclAddCountstate.clAddCount//div
/template!--方式1 如果想修改name可以再写一个script标签专门指定name --
!-- script langts
export default {name: Home
}
/script --!--方式3安装配置vite-plugin-vue-setup-extend插件后,直接在script标签中写name即可 --
script nameHome langts setup
import { ref, reactive, onMounted, defineOptions } from vue// 方式2 定义组件的name
// defineOptions({
// name: Home
// })
import ChildA from ./ChildA.vue
// vue3.2setup语法糖
const ChildARef: any ref(null)
const state reactive({count: 0,msg: hello world,addCount: () {state.count},//addMsg: (val) {state.msg val},clAddCount: (val) {state.count val},addChildAge: () {ChildARef.value.clAge 1},
})
onMounted(() {//
})
/scriptstyle langcss scoped
.home {color: pink;font-size: 16px;
}
/style
Home/ChildA.vue的代码:
templatediv stylefont-size: 16px;background: rgb(77, 112, 228);h3我是ChildA组件/h3h3测试传参/h3divprops.msg:{{ msg }}/divdivclAge:{{ clAge }}/div!-- v-memo等号里的值不发生变化就不会进行更新视图 --div v-for(item, index) in numArr :keyindex v-memo[numArr]numArrItem:{{ item }}/divbutton clickhanderAddMsg新增msg/buttonbutton clickhanderAddCount新增count/button/div
/templatescript langts setup
import { onMounted, defineProps, defineEmits, defineExpose, ref } from vue
// vue3.2setup语法糖
const props defineProps({msg: {type: String,default: default-msg},numArr: {type: Array,default: () []}
})
const $myDefineEmits defineEmits([addMsg, clAddCount])
const handerAddMsg ():void {$myDefineEmits(addMsg, 新增msg-)
}
const handerAddCount ():void {$myDefineEmits(clAddCount, 1)
}
const clAge ref(18)
defineExpose({clAge
})
onMounted(() {console.log(props)
})
/script
初始页面显示效果:
父组件index文件设置nameHome可以看到组件变为Home。
子组件ChildA文件没设置name可以看到组件名和组件相同ChildA。 点击state.Count按钮页面显示效果: 点击子组件的clAge按钮页面显示效果: 点击新增msg按钮页面显示效果: 点击新增count按钮页面显示效果: 可以看到父子组件间的通信是足够用的新的方法使用起来和之前其实大同小异代码还比之前简洁了。 欢迎关注我的原创文章小伙伴们我是一名热衷于前端开发的作者致力于分享我的知识和经验帮助其他学习前端的小伙伴们。在我的文章中你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师还是仅仅对前端开发感兴趣我的文章将能为你提供宝贵的指导和知识。
在我的文章中你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者我的文章都能够满足你的学习需求。
此外我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展新的框架和工具层出不穷。通过我的文章你将会了解到最新的前端技术趋势并了解如何应对这些变化。
我深知学习前端不易因此我将尽力以简洁明了的方式解释复杂的概念并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发并提升你的技能。
如果你想了解更多关于前端开发的内容不妨关注我的原创文章。我会不定期更新为你带来最新的前端技术和知识。感谢你的关注和支持我们一起探讨交流技术共同进步期待与你一同探索前端开发的奇妙世界
