vue3 script setup-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

vue3 script setup

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>