Vue3 Setup语法糖，父子组件之间传各种数据类型方法

Vue3 Setup语法糖，父子组件之间传各种数据类型方法

一、父组件向子组件使用语法糖传字符串类型

        1.父组件

msg是你的自定义的变量名，用于传给子组件，content是你父组件的要传给子组件的数据。

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <Hello :msg="content" />
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { ref } 
       
       from 
       
       "vue";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       Hello 
       
       from 
       
       "../components/HelloWorld.vue";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const content = 
       
       ref(
       
       "那就这样吧");
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>
      
      
     
     
   
   

        2.子组件

语法糖中可以直接在props = defineProps()的方法里面写你穿过来的数据，最后在模板中调用就ok了

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <h
       
       1
       
       >{{ props.msg }}
       
       <
       
       /h
       
       1
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const props 
       
       = defineProps({
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         msg: 
       
       String,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       });
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     
   
   

 最终呈现处这样的效果

二、父组件向子组件使用语法糖传数组类型

1.父组件传递

 组件中DateList是你声明传递给子组件的名称，ArrayList是你要传递给子组件的数据。

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <Hello  :DateList
       
       =
       
       "ArrayList"  
       
       /
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { reactive } 
       
       from 
       
       "vue";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import Hello 
       
       from 
       
       "../components/HelloWorld.vue";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const ArrayList 
       
       = reactive([
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       1,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       "法外",
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       2,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       "狂徒",
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       3,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       "张三",
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       ]);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     
   
   

    
    
   
   
   
   

2.子组件接收

语法糖中可以直接在props = defineProps()的方法里面写你穿过来的数据，最后在模板中循环输出就ok了

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <h
       
       1
       
       >{{ props.msg }}
       
       <
       
       /h
       
       1
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <div v-for
       
       =
       
       "(item, index) in props.DateList" :
       
       key
       
       =
       
       "item.id"
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             {{ item.name }}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const props 
       
       = defineProps({
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         msg: 
       
       String,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         DateList: Array,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       });
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       console.log(props.DateList);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     
   
   

    
    
   
   
   
   

呈现效果

三.子组件向父组件使用语法糖传字值

1.子组件

 子传父需要用到事件来传递， let emigFun = defineEmits(["handLer"]); 使用defineEmits语法糖，创建一个自定义事件，然后根据自定义事件来传递你想要传递的类型（如下图）

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <div @click
       
       =
       
       "fun"
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               子传父
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { reactive } 
       
       from 
       
       "vue";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       let emigFun 
       
       = defineEmits([
       
       "handLer"]);
       
       /
       
       /使用defineEmits语法糖的方法来创建自定义事件。
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const dat 
       
       = reactive([
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       123,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       1,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       123,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       1,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       123,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       1,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           name: 
       
       123,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           id: 
       
       1,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       ]);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const fun 
       
       = () 
       
       =
       
       > {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         emigFun(
       
       "handLer", dat);
       
       /
       
       /左边是你的自定义事件名，右边是你要传的数据。
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       };
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     
   
   

    
    
   
   
   
   

2.父组件

父组件这边就可以直接使用你子组件创建的自定义事件，加上你父组件的事件名，通过形参的方式成功拿到子组件的数据（如下图）

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <Hello  @handLer
       
       =
       
       "hand" 
       
       /
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               点击拿到子组件的值
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import Hello 
       
       from 
       
       "../components/HelloWorld.vue";
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const hand 
       
       = (v) 
       
       =
       
       > {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         console.log(v);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       };
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     
   
   

    
    
   
   
   
   

效果展示

总结

另外还有一些使用setup语法糖的一些问题，下一篇给大家讲一下，其次Vue父子组件互相传值，传来传去新手容易懵，多理清思路，慢慢来，还有什么更好的见解，或者想法请在下方评论探讨。