Vue3.2 setup语法糖 [ 单文件组件的语法糖<script setup>
]
如果你对Vue3语法糖有一定了解,配和我另外一篇一起食用更好哦!Vue3必学技巧-自定义Hooks-让写Vue3更畅快
阅读本来,默认你已经对Vue3.0的composition API有一定了解,但困扰于setup函数内需要繁琐return相关的变量和函数,那setup的语法糖<script setup>
你将收获满满。语法糖<script setup>
的引入让你写Vue3更爽,让Vue3更丰满。本文是在官方文档基础上写的,如果有时间,建议上官方文档上看,本文写得更为语义化和通俗,希望你能喜欢。
<script setup>
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖
解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在<template/>
使用的问题
1.<script setup>
中无需return 声明的变量、函数以及import引入的内容,即可在<template/>
使用
-
<script setup>
语法糖<script setup> //import引入的内容 import { getToday } from './utils' // 变量 const msg = 'Hello!' // 函数 function log() { console.log(msg) } </script> //在template中直接使用声明的变量、函数以及import引入的内容 <template> <div @click="log">{{ msg }}</div> <p>{{getToday()}}</p> </template>
-
标准组件
<script>
需要写setup函数并繁琐retrun<script> //import引入的内容 import { getToday } from './utils' export default{ setup(){ // 变量 const msg = 'Hello!' // 函数 function log() { console.log(msg) } //想在tempate里面使用需要在setup内return暴露出来 return{ msg, log, getToday } } } </script> <template> <div @click="log">{{ msg }}</div> <p>{{getToday()}}</p> </template>
总结:
<script setup>
语法糖里面的代码会被编译成组件setup()
函数的内容,不需要通过return暴露 声明的变量、函数以及import引入的内容,即可在<template/>
使用,并且不需要写export default{}
<script setup>
语法糖里面的代码会被编译成组件setup()
函数的内容。这意味着与普通的<script>
只在组件被首次引入的时候执行一次不同,<script setup>
中的代码会在每次组件实例被创建的时候执行<script> console.log('script');//多次实例组件,只触发一次 export default { setup() { console.log('setupFn');//每次实例化组件都触发和script-setup标签一样 } } </script>
(script-setup标签最终都会编译成
setup()
函数的内容,每次实例化组件,就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件,就是实例化一次setup函数,但是script标签setup是需要写在export default{}内的,外的只是首次引入的时候执行一次)
2、<script setup>
引入组件将自动注册
不需要在引入组件后,通过
components:{}
注册组件,可直接使用
<script setup> import MyComponent from './MyComponent.vue' //components:{MyComponent} 不需要注册直接使用 </script>
<template>
<MyComponent />
</template>
3、组件通信:在<script setup>
中必须使用 defineProps
和 defineEmits
API 来替代 props 和 emits
defineProps
和defineEmits
具备完整的类型推断并且在<script setup>
中是直接可用的(浏览了一下掘金,发现大部分文章demo还是通过import引入这2个api,这点官方文档写得很清楚)
defineProps 代替props,接收父组件传递的数据(父组件向子组件传参)
父组件:
<template>
<div>父组件</div>
<Child :title="msg" />
</template>
<script setup> import {ref} from 'vue' import Child from './child.vue' const msg = ref('父的值') //自动返回,在template直接解套使用 </script>
子组件:
<template/>
中可以直接使用父组件传递的props (可省略props.)<script-setup>
需要通过props.xx获取父组件传递过来的props
<template>
<div>子组件</div>
<div>父组件传递的值:{{title}}</div>
</template>
<script setup> //import {defineProps} from 'vue' 不需要引入 //语法糖必须使用defineProps替代props const props = defineProps({ title: { type: String } }); //script-setup 需要通过props.xx获取父组件传递过来的props console.log(props.title) //父的值 </script>
defineEmit 代替emit,子组件向父组件传递数据(子组件向外暴露数据)
子组件代码:
<template>
<div>子组件</div>
<button @click="toEmits">子组件向外暴露数据</button>
</template>
<script setup> import {ref} from 'vue' const name = ref('我是子组件') //1、暴露内部数据 const emits = defineEmits(['childFn']); const toEmits = () => { //2、触发父组件中暴露的childFn方法并携带数据 emits('childFn',name) } </script>
父组件代码:
<template>
<div>父组件</div>
<Child @childFn='childFn' />
<p>接收子组件传递的数据{{childData}} </p>
</template>
<script setup> import {ref} from 'vue' import Child from './child.vue' const childData = ref(null) const childFn=(e)=>{ consloe.log('子组件触发了父组件childFn,并传递了参数e') childData=e.value } </script>
4.<script setup>
需主动向父组件暴露子组件属性 :defineExpose
使用
<script setup>
的组件,父组件是无法通过ref 或者$parent
获取到子组件的ref等响应数据,需要通过defineExpose 主动暴露
子组件代码:
<script setup> import { ref } from 'vue' const a = 1 const b = ref(2) //主动暴露组件属性 defineExpose({ a, b }) </script>
父组件代码:
<template>
<div>父组件</div>
<Child ref='childRef' />
<button @click='getChildData'>通过ref获取子组件的属性 </button>
</template>
<script setup> import {ref} from 'vue' import Child from './child.vue' const childRef= ref() //注册响应数据 const getChildData =()=>{ //子组件接收暴露出来得值 console.log(childRef.value.a) //1 console.log(childRef.value.b) //2 响应式数据 } </script>
5.语法糖其他功能
-
useSlots
和useAttrs
(少用,由于大部分人是SFC模式开发,在<template/>
通过<slot/>
标签就可以渲染插槽)如果需要在
script-setup
中使用slots
和attrs
需要用useSlots
和useAttrs
替代需要引入:
import { useSlots ,useAttrs } form 'vue'
在
<template/>
中通过$slots
和$attrs
来访问更方便(
slots可以获取父组件中插槽传递的虚拟dom对象,在SFC模式应该用处不大,在JSX /TSX使用比较多)父组件:
<template> <Child msg="非porps传值子组件用attrs接收" > <!-- 匿名插槽 --> <span >默认插槽</span> <!-- 具名插槽 --> <template #title> <h1>具名插槽</h1> </template> <!-- 作用域插槽 --> <template #footer="{ scope }"> <footer>作用域插槽——姓名:{{ scope.name }},年龄{{ scope.age }}</footer> </template> </Child> </template> <script setup> // 引入子组件 import Child from './child.vue' </script>
子组件:
<template> <!-- 匿名插槽 --> <slot /> <!-- 具名插槽 --> <slot name="title" /> <!-- 作用域插槽 --> <slot name="footer" :scope="state" /> <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 --> <p>{{ attrs.msg == $attrs.msg }}</p> <!--true 没想到有啥作用... --> <p>{{ slots == $slots }}</p> </template> <script setup> import { useSlots, useAttrs, reactive, toRef } from 'vue' const state = reactive({ name: '张三', age: '18' }) const slots = useSlots() console.log(slots.default()); //获取到默认插槽的虚拟dom对象 console.log(slots.title()); //获取到具名title插槽的虚拟dom对象 // console.log(slots.footer()); //报错 不知道为啥有插槽作用域的无法获取 //useAttrs() 用来获取父组件传递的过来的属性数据的(也就是非 props 的属性值)。 const attrs = useAttrs() </script>
useSlots或许在JSX/TSX下更实用
想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx
useSlots 可以获取父组件传递过来插槽的虚拟dom对象,可以用来渲染插槽内容
<script lang='jsx'> import { defineComponent, useSlots } from "vue"; export default defineComponent({ setup() { // 获取插槽数据 const slots = useSlots(); // 渲染组件 return () => ( <div> {slots.default?slots.default():''} {slots.title?slots.title():''} </div> ); }, }); </script>
大部分人是SFC模式开发,在
<template/>
通过<slot/>
标签就可以渲染插槽,这种JSX 的写法应该是很少人会使用的
6.在setup访问路由
- 访问路由实例组件信息:route和router
setup
里不能访问this
,不能再直接访问this.$router
或this.$route
。(getCurrentInstance可以替代this但不推荐)推荐:使用
useRoute
函数和useRouter
函数替代this.$route
和this.$router
<script setup> import { useRouter, useRoute } from 'vue-router' const route = useRoute() const router = useRouter() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, }, }) } <script/>
- 导航守卫
仍然可以使用路由实例组件的导航守卫
import router from './router'
router.beforeEach((to,from,next)=>{
})
也可以使用组合式api的导航守卫onBeforeRouteLeave, onBeforeRouteUpdate
<script setup> import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' // 与 beforeRouteLeave 相同,无法访问 `this` onBeforeRouteLeave((to, from) => { const answer = window.confirm( 'Do you really want to leave? you have unsaved changes!' ) // 取消导航并停留在同一页面上 if (!answer) return false }) const userData = ref() // 与 beforeRouteUpdate 相同,无法访问 `this` onBeforeRouteUpdate(async (to, from) => { //仅当 id 更改时才获取用户,例如仅 query 或 hash 值已更改 if (to.params.id !== from.params.id) { userData.value = await fetchUser(to.params.id) } }) <script/>
组合式 API 守卫也可以用在任何由 `<router-view>` 渲染的组件中,它们不必像组件内守卫那样直接用在路由组件上。
总结:setup的语法糖作为Vue3的补充,让Vue3更加丰满,让我们写Vue3更爽。如果觉得写得还不错不吝啬给点给赞再走吧!
如果你看完后觉得意犹未尽,似乎没get到Vue3究竟好在哪?请了解下Vue3的自定义Hooks!
Vue3配合自定义Hooks或许才是Vue3的完全体!因为有部分人看完这篇后,还觉得Vue3函数和变量写在一起不优雅!不妨看下这篇! ✈️✈️✈️✈️✈️✈️Vue3必学技巧-自定义Hooks-让写Vue3更畅快 – 掘金 (juejin.cn)✈️✈️✈️✈️✈️
今天的文章Vue3拒绝写return,用setup语法糖,让写Vue3更畅快分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/13586.html