vue3 script setup

解决在使用vue 3 composition API(组合式API)时繁琐的问题，比如定义一个方法，模板需要使用该方法，就必须将方法返回，当组件中存在大量方法和属性时就很麻烦。

一、什么是script setup
二、script setup什么作用
1.自动注册子组件
2.属性和方法无需返回
3.支持props、emit、context

一、什么是script setup

script setup是vue3新出的语法糖，使用方法就是在script标签内加上setup

<script setup></script>

二、script setup有什么用

1.自动注册子组件

eg:有两个组件，父组件Father.vue，子组件Child.vue

vue3语法
引入Child组件后，需要在components中注册对应的组件才能使用。

<template>
  <div>
    <h2>我是父组件!</h2>
    <Child />
  </div>
</template>

<script>
	import { defineComponent, ref } from 'vue';
	import Child from './Child.vue'

	export default defineComponent({
		components: {
			Child
		},
		setup() {
			return {
      
			}
		}
	});
</script>

script setup写法
直接省略注册子组件过程

<template>
  <div>
    <h2>我是父组件!</h2>
    <Child />
  </div>
</template>

<script setup>
	import Child from './Child.vue'
</script>

2.属性和方法无需返回

composition API繁琐是因为需要手动返回模板要用的属性和方法，而在script setup中可以省略这一步。 **vue3语法**

<template>
	<div>
		<h2 @click="ageInc">{{ name }} is {{ age }}</h2>
	</div>
</template>

<script>
	import { defineComponent, ref } from 'vue';

	export default defineComponent({
		setup() {
			const name = ref('CoCoyY1')
			const age = ref(18)
			const ageInc = () => {
				age.value++
			}

			return {
				name,
				age,
				ageInc
			}
		}
	})
</script>

script setup写法

<template>
	<div>
		<h2 @click="ageInc">{{ name }} is {{ age }}</h2>
	</div>
</template>

<script setup>
	import { ref } from 'vue';

	const name = ref('CoCoyY1')
	const age = ref(18)
	const ageInc = () => {
		age.value++
	}
</script>

3.支持props、emit、context

vue3语法

//Father.vue
<template>
	<div>
		<h2>我是父组件！</h2>
		<Child msg="hello" @child-click="childCtx" />
	</div>
</template>

<script>
	import { defineComponent, ref } from 'vue';
	import Child from './Child.vue';

	export default defineComponent({
		components: {
			Child
		},
		setup(props, context) {
			const childCtx = (ctx) => {
				console.log(ctx);
			}
			return {
				childCtx
			}
		}
	})
</script>

//Child.vue
<template>
	<span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script>
	import { defineComponent, ref } from 'vue'

	export default defineComponent({
		emits: [
			'child-click'
		],
		props: {
			msg: String
		},
		setup(props, context) {
			const handleClick = () => {
				context.emit('child-click', context)
			}
			return {
				props,
				handleClick
			}
		},
	})
</script>

script setup写法

//Father.vue
<template>
	<div>
		<h2>我是父组件！</h2>
		<Child msg="hello" @child-click="childCtx" />
	</div>
</template>

<script setup>
	import Child from './Child.vue';

	const childCtx = (ctx) => {
		console.log(ctx);
	}
</script>


//Child.vue
<template>
	<span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script setup>
	import { useContext, defineProps, defineEmit } from 'vue'

	const emit = defineEmit(['child-click'])
	const ctx = useContext()
	const props = defineProps({
		msg: String
	})

	const handleClick = () => {
		emit('child-click', ctx)
	}
</script>

可以成功打印context，其中的attrs、emit、props、slots、expose属性和方法依然可以使用。

setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmit和useContext。

defineProps: 用来接收父组件传来的值props。defineEmit: 用来声明触发的事件表。
useContext: 用来获取组件上下文context。

更多☞☞☞
vue3 setup（详细）使用教程
vue3 setup() 高级用法示例详解