vue3 setup语法糖 详细使用说明

在Vue3 中 setup 有两种表现方式：

一种是 我们常用的：

<script>
 export default {
 	name: 'home',
     setup() {
       return {};
     },
 };
</script>

还有一种是 setup 语法糖：(给组件起名字，就需要 按照原本的方式 导出了)

 <script> export default { name: 'home', } </script>
 <script setup>
 
 </script>

那我就来介绍一下 setup 语法糖的用法:

1. 挂在组件

 <template>
 		<Index /> 
 </template>
 <script setup>
 	// 不需要挂载注册
 	import Index from './index.vue';
 </script>

2. 使用 refs 的一系列操作

 // 父组件 Father.vue
 <template>
 		<Index ref="IndexRefs" /> 
 </template>
 <script setup>
 	import Index from './index.vue';
 	import { onMounted , ref } from 'vue';
 	
 	const IndexRefs = ref(null)
 	
 	onMounted (()=>{
 			IndexRefs.value.num +1			// 1
 			IndexRefs.value.click()			// 2
 	})
 </script>

 // 子组件 Index.vue
 <template>
 		num:{{ num }}
 </template>
 <script setup>
 	import { ref } from 'vue';
 	
 	const num = ref(0)
 	const click = () =>{
     	num .value +2
     }
 	
 	// 父级想操作的数据 或者 方法导出去
 	defineExpose({
 	    num
 	    click 
 	 });
 </script>

3. 组件之间 相互 传参

 // 父传子
 // 父组件 Father.vue
 <template>
 		<Index :num="num" /> 
 </template>
 <script setup>
 	import Index from './index.vue';
 	import { ref } from 'vue';
 	const num = ref(10)
 	
 </script>

 // 子组件 Index.vue
 <template>
 		{{ num }}
 </template>
 <script setup>
 	// 接收值
 	const { num } = defineProps({
 	    num : Number,
 	});	
 	console.log('num' , num) 
 </script>

 // 子传父
 // 父组件 Father.vue
 <template>
 		<Index @porpsClick="btn"  /> 
 </template>
 <script setup>
 	import Index from './index.vue';
 	const btn = (_porps) => {
 		console.log('_porps' , _porps)		// 123
 	}
 	
 </script>

 // 子组件 Index.vue
 <template>
 		<button @click="btn">点我传参</button>
 </template>
 <script setup>
 	const emit = defineEmits(['porpsClick']);
 	const btn = () =>{
 		emit( 'porpsClick' , 123 )
 	}
 </script>

4. useSlots 和 useAttrs 使用

	<script setup>
		import { useAttrs, useSlots } from 'vue';

		 const attrs = useAttrs();
		 const slots = useSlots();
	</script>

此文章是为了记录学习，
有什么没提到的可以交流，互相学习