刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本。
在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验性提案的提示,在 V3.2 中,才会去除提示并移除一些废弃的 API。
是 vue3 的新语法糖,并不是新增的功能模块,只是简化了以往的组合式 API 必须返回(return)的写法,并且有更好的运行时性能。
写法简便:
<script setup>...
</script>
使用 script setup 语法糖时,内部的属性或方法可以直接使用,无需 return 返回;引入子组件可以自动注册,无需 components 注册可直接使用等等,接下来介绍 script setup 语法糖具体使用以及与 setup() 函数的区别。
setup() 来写组合式 API 时,内部定义的属性和方法,必须使用 return 暴露到上下文,外部才能够使用,否则就会报错,写法为:
<template>{{todoList}}
</template>
<script>export default{
setup(){
let todoList =[
{todo:"我想看海",isCheck:false},
{todo:"我想浪漫",isCheck:true},
]
return{
todoList,
}
}
}
</script>
使用 script setup 语法糖,不需要 return 和 setup函数,只需要全部定义到 script setup 内。
可以简化上述代码为:
<template>{{todoList}}
</template>
<script setup>let todoList =[
{todo:"我想看海",isCheck:false},
{todo:"我想浪漫",isCheck:true},
]
</script>
在 script setup 语法糖中,引入的组件可以自动注册,不需要再通过 components 进行注册,而且无法指定当前组件的名字,会自动以文件名为主,省去了 name 属性。
<template>
<SetUp></SetUp>
<set-up></set-up>
</template>
<script setup>import SetUp from "./SetUp.vue"
</script>
而在 setup() 写的组合式 API 中,引入的组件必须在 components 内注册之后才能使用,否则无法正常引入。
父组件给子组件传值时,需要 props 接收。setup( props, context )接收两个参数,props 接收传递的数据,使用 setup() 接收数据如下:
<template>{{ a }} {{ b }}
</template>
<script>import { toRefs } from "vue"export default{
setup(props,context){
const { a,b } =toRefs(props)
return{
a,
b
}
}
}
</script>
而 script setup 语法糖接收 props 中的数据时,使用 defineProps 方法来获取,可以修改上述代码为:
<template>{{ a }} {{ b }}
</template>
<script setup>import { toRefs } from "vue"const props =defineProps({
a: String,
b: String
})
const { a, b } =toRefs( props )
</script>
setup( props, context )接收两个参数,context 上下文环境,其中包含了属性、插槽、自定义事件三部分。
setup() 内获取如下:
setup(props,context){
const { attrs, slots, emit } =context
//attrs 获取组件传递过来的属性值,
//slots 组件内的插槽
//emit 自定义事件 子组件
}
使用 script setup 语法糖时,
<script setup>import { useAttrs, useSlots } from 'vue'const slots =useSlots();
const attrs =useAttrs();
const emits = defineEmits(['getChild']);
</script>
script setup 语法糖的组件默认不会对外暴露任何内部声明的属性。如果有部分属性要暴露出去,可以使用 defineExpose。
子组件暴露属性:
<template>{{msg}}
</template>
<script setup>import { ref } from 'vue'let msg = ref("Child Components");
//defineExpose无需导入,直接使用
defineExpose({
msg
});
</script>
父组件引用子组件暴露的属性:
<template>
<Child ref="child" />
</template>
<script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'let child = ref(null);
onMounted(() =>{
console.log(child.value.msg); //Child Components
console.log(child.value.num); //123
})
</script>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/web-learn/p/15617981.html
内容来源于网络,如有侵权,请联系作者删除!