vue3的setup语法糖设置了不生效？

Question

谁可以告诉我vue3的setup语法糖设置了不起作用是什么原因
急

Answer 1

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7608506
• 这篇博客也不错, 你可以看下Vue3中自定义事件实现子组件向父组件传递数据
• 除此之外, 这篇博客: vue3 setup语法糖 详细使用说明中的 那我就来介绍一下 setup 语法糖的用法: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
• 1. 挂在组件

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

  1. 使用 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>
  

  1. 组件之间 相互 传参

   // 父传子
   // 父组件 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>
  

  1. useSlots 和 useAttrs 使用

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

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

• 您还可以看一下 张益珲老师的循序渐进Vue3.x开发入门课程中的 前端技术演进小节, 巩固相关知识点