前文作为一个前端程序员,说起 Vue 3肯定不会陌生,作为时下最火的前端框架之一,很多人将它作为入门框架。 但是尽管 Vue 3很久之前就已经开始投入使用,也不免会有人抱怨 Vue 3的知识点太多太杂,更新太快。这不,最近 Vue 3又定稿了一项新技术:script-setup 语法糖。
1.什么是setup语法糖起初 Vue3.0 暴露变量必须 return 出来,template中才能使用; 现在只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。 <template> <my-component :num="num" @click="addNum" /></template><script setup> import { ref } from 'vue'; import MyComponent from './MyComponent .vue'; // 像在平常的setup中一样的写,但是不需要返回任何变量 const num= ref(0) //在此处定义的 num 可以直接使用 const addNum= () => { //函数也可以直接引用,不用在return中返回 num.value++ }</script>//必须使用驼峰命名
2.使用setup组件自动注册在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。示例: <template> <zi-hello></zi-hello></template><script setup> import ziHello from './ziHello'</script>
3.使用setup后新增API因为没有了setup函数,那么props,emit怎么获取呢 setup script语法糖提供了新的API来供我们使用
3.1 defineProps用来接收父组件传来的 props。示例: 父组件代码 <template> <div class="die"> <h3>我是父组件</h3> <zi-hello :name="name"></zi-hello> </div></template><script setup> import ziHello from './ziHello' import {ref} from 'vue' let name = ref('赵小磊========')</script> 子组件代码 <template> <div> 我是子组件{{name}} // 赵小磊======== </div></template><script setup> import {defineProps} from 'vue' defineProps({ name:{ type:String, default:'我是默认值' } })</script>
3.2 defineEmits子组件向父组件事件传递。示例: 子组件 <template> <div> 我是子组件{{name}} <button @click="ziupdata">按钮</button> </div></template><script setup> import {defineEmits} from 'vue' //自定义函数,父组件可以触发 const em=defineEmits(['updata']) const ziupdata=()=>{ em("updata",'我是子组件的值') }</script> 父组件 <template> <div class="die"> <h3>我是父组件</h3> <zi-hello @updata="updata"></zi-hello> </div></template><script setup> import ziHello from './ziHello' const updata = (data) => { console.log(data); //我是子组件的值 }</script>
3.3 defineExpose组件暴露出自己的属性,在父组件中可以拿到。示例: 子组件 <template> <div> 我是子组件 </div></template><script setup> import {defineExpose,reactive,ref} from 'vue' let ziage=ref(18) let ziname=reactive({ name:'赵小磊' }) //暴露出去的变量 defineExpose({ ziage, ziname })</script> 父组件 <template> <div class="die"> <h3 @click="isclick">我是父组件</h3> <zi-hello ref="zihello"></zi-hello> </div></template><script setup> import ziHello from './ziHello' import {ref} from 'vue' const zihello = ref() const isclick = () => { console.log('接收ref暴漏出来的值',zihello.value.ziage) console.log('接收reactive暴漏出来的值',zihello.value.ziname.name) }</script> 父组件拿到的结果
vue3项目如何开启setup语法糖https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar 1.首先要将编辑器的vetur插件关闭,打开Volar 2.再新建一个tsconfig.json / jsconfig.json 文件 ,在compilerOptions里面加上 "strict": true,和 下载地址: 利用Vue3封装一个弹框组件简单吗 在Vue页面中如何更优雅地引入图片详解 |