欢迎光临
我的个人博客网站

Vue3 script setup 语法糖,超爽体验

Vue3 script setup 语法糖,超爽体验

目录

简介

<script setup> 语法糖并不是新增的功能模块,它只是简化了以往的组合API(compositionApi)的必须返回(return)的写法,并且有更好的运行时性能。

在 setup 函数中:所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。相对于之前的写法,使用后,语法也变得更简单。

你不必担心setup语法糖的学习成本,他是组合式API的简化,并没有新增的知识点。你只需要了解一些用法和细微的不同之处,甚至比之前写setup()还要顺手!

使用方式极其简单,仅需要在 script 标签加上 setup 关键字即可。示例:

<script setup>  </script> 

注:因为setup语法糖是vue3.2正式确定下来的议案,所以vue3.2的版本是真正适合setup语法糖的版本。


1. 属性和方法无需返回,直接使用

以前使用响应式数据是:

<template> 	{{msg}} </template>  <script> import { ref } from 'vue' export default { 	setup () { 		const msg = ref('hello vue3'); 		return { 			msg 		} 	} } </script> 

现在使用 setup 语法糖,不需要return返回setup函数,只需要全部定义在<script setup>内即可:

<template> 	{{msg}} </template>  <script setup> import { ref } from 'vue' const msg = ref('hello vue3'); </script> 

reactive, computed, 也一样可以使用:

<template> 	<div>{{msg}}</div> 	<div>{{obj.a}}</div> 	<div>{{sum}}</div> </template>  <script setup> import { ref, reactive, computed } from 'vue'  const msg = ref('hello vue3');  const obj = reactive({ 	a: 1, 	b: 2 })  const sum = computed(() => { 	return obj.a + 3; }); </script> 

2. 组件自动注册

在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。示例:

<template> 	<Child /> </template>  <script setup> import Child from '@/components/Child.vue' </script> 

3. 组件数据传递(props和emits)

propsemits 在语法糖中使用 defineEmitsdefineProps 方法来使用:

子组件 Child.vue:

<template> 	<div @click="toEmits">Child Components</div> </template>  <script setup> // defineEmits,defineProps无需导入,直接使用 const emits = defineEmits(['getChild']); const props = defineProps({ 	title: { 		type: String, 		defaule: 'defaule title' 	} });  const toEmits = () => { 	emits('getChild', 'child value') // 向父组件传递数据 }  // 获取父组件传递过来的数据 console.log(props.title); // parent value </script> 

父组件 Home.vue:

<template> 	<Child @getChild="getChild" :title="msg" /> </template>  <script setup> import { ref } from 'vue' import Child from '@/components/Child.vue' const msg = ref('parent value') const getChild = (e) => { 	// 接收父组件传递过来的数据 	console.log(e); // child value } </script> 

4. 获取 slots 和 attrs

可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后,废除了这个语法,被拆分成了useAttrs和useSlots。示例:

// 旧 <script setup>   import { useContext } from 'vue'    const { slots, attrs } = useContext() </script>  // 新 <script setup>   import { useAttrs, useSlots } from 'vue'      const slots = useSlots();   const attrs = useAttrs();   console.log(attrs.dataId); // 查看父组件传来的自定义属性 </script> 

5. 对外暴露属性(defineExpose)

<script setup> 的组件默认不会对外部暴露任何内部声明的属性。
如果有部分属性要暴露出去,可以使用 defineExpose

子组件 Child.vue:

<template> 	{{msg}} </template>  <script setup> import { ref } from 'vue'  let msg = ref("Child Components"); let num = ref(123);  // defineExpose无需导入,直接使用 defineExpose({ 	msg, 	num }); </script> 

父组件 Home.vue:

<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> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue3 script setup 语法糖,超爽体验
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏