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父子组件互相传值，传来传去新手容易懵，多理清思路，慢慢来，还有什么更好的见解，或者想法请在下方评论探讨。

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父子组件互相传值，传来传去新手容易懵，多理清思路，慢慢来，还有什么更好的见解，或者想法请在下方评论探讨。