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

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

img

img

  • 这个问题的回答你可以参考下: 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开发入门课程中的 前端技术演进小节, 巩固相关知识点