前言

Vue3已经发布很长一段时间了，相信大多数前端人都已经上手玩过了，其中比较大的一个特性就是setup方法，可以让我们非常直观和方便的组合我们的业务逻辑和hooks。在setup里面返回的变量可以直接在template里面使用。大多数情况下，我们的大部分逻辑都集中在setup方法里面，所以官方提供了一个实验性的写法，直接在script里面写setup的内容，即：<script lang="ts" setup>。

之前

我们之前的组件可能是这样的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import Card from "./components/Card.vue";

export default defineComponent({
  components: {
    Card,
  },
  setup() {
    const msg = ref("setup script");
    return { msg };
  }
});
</script>

这里做了两件事，一个是导入并注册组件，一个是导出一个字符串给template使用。

现在

启用<script lang="ts" setup>之后是这样的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>

<script  setup>
import { ref } from "vue";
import Card from "./components/Card.vue";
const msg = ref("setup script");
</script>

在<script lang="ts" setup>里面定义的所有变量都会自动导出非常方便,而且所有的组件导入即可自动注册从而直接就可以使用了

使用props

使用props需要用到defineProps来定义，具体用法跟之前的props写法类似：

<script  setup>
import { defineProps } from "vue";
//定义父组件传递进来的参数
const props = defineProps(['title', 'content']);
</script>

给props定义类型：

<script  setup>
	const props = defineProps({
	  title: String,
	  content: {
	      type: Stirng,
	      required: true
	  }
	});
</script>

使用emits

使用defineEmit对组件里面使用到的事件进行验证和定义：

<script  setup>
	import { defineEmit } from 'vue'
	
	// const emit = defineEmit(['onHeaderClick'])
	// 绑定父组件的事件,和传参
	//emit('onHeaderClick', 'params')
	
	//绑定多个事件
	//const emit = defineEmits(['update', 'delete'])
	
	// 绑定父组件的事件,对事件进行验证
	const emit = defineEmit({
	    onHeaderClick: ({title}) => {
	        if(!title) {
	            console.warn('Invalid title')
	            return false
	        }
	        return true
	    }
	})
</script>

具体的用法跟之前的一样。

使用context

使用useContext获取上下文：

<script  setup>
	import { useContext } from 'vue'
	const { slots, attrs } = useContext()
</script>

获取到的slots, attrs跟之前的setup里面的是一样的。

指令

指令跟组件一样，导入自动注册：

<script setup>
  import {color} from './v-color'
</script>

<template>
  <div v-color />
</template>

导入的color自动映射为指令v-color

<script setup>
  import {color as superColor} from './v-color'
</script>

<template>
  <div v-super-color />
</template>

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^