vue3中父组件与组件之间参数传递，使用(defineProps/defineEmits)，涉及属性传递，对象传递，数组传递，以及事件传递

Vue3 中子父组件之间的通信

一、父组件传递参数到子组件 采用defineProps

传递属性

父组件:

<template> <div> <h1>这是父组件</h1> <h1>父组件像子组件传递参数</h1> <h2>传递属性值</h2>  <HH :fatherMessage="fatherMessage" :valNum="valNum" :valBool="valBool" /> </div> </template>  <script setup> import { ref } from "vue"; import HH from "@/components/HelloWorld"; //定义参数进行传递到子组件 let fatherMessage = ref("大头"); //字符 let valNum = ref(1); //数字 let valBool = ref(true); //布尔类型  </script>  <style> </style> 

子组件:

<template> <div> <h1>这是子组件</h1> <h2>属性值接收区</h2> <div style="margin: 5px; border: 2px solid gold"> 父组件传值接收区：字符型：{{ fatherMessage }}，数字类型：{{ valNum }}，布尔类型:{{ valBool }} </div> </div> </template> <script setup> import { defineProps, defineEmits } from "vue"; //使用defineProps接收父组件传递的参数 defineProps({ fatherMessage: { type: String, }, valNum: { type: Number, }, valBool: { type: Boolean, }, });  </script>  

传递对象或者数组

父组件:

<template> <div> <h1>这是父组件</h1> <h1>父组件像子组件传递参数</h1> <h2>传递属性值</h2> <HH :fatherMessage="fatherMessage" :valNum="valNum" :valBool="valBool" :testprop="testprop" :testprops="testpropLlist" />  </div> </template>  <script setup> import { ref, reactive } from "vue"; import HH from "@/components/HelloWorld"; let fatherMessage = ref("大头"); //字符 let valNum = ref(1); //数字 let valBool = ref(true); //布尔类型 //定义数组 const propsList = [ { name: "李四", Id: 1 }, { name: "张三", Id: 2 }, { name: "王麻子", Id: 3 }, ]; //定义对象 const myObj = reactive({ name: "zs", age: 20, });  let testprop = ref(myObj);  let testpropLlist = ref(propsList);  </script>  <style> </style> 

子组件:

<template> <div> <h1>这是子组件</h1> <h2>属性值接收区</h2> <div style="margin: 5px; border: 2px solid gold"> 父组件传值接收区：字符型：{{ props.fatherMessage }}，数字类型：{{ props.valNum }}，布尔类型:{{ props.valBool }} </div> <h2>对象/数组接收区</h2> <div style="margin: 5px; border: 2px solid rgb(77, 52, 219)"> 父组件传值接收区： 对象接收:{{ props.testprop }},数组接收:{{ props.testprops }},数组单个值:{{ vvv }}} ,循环数组的值: <ul> <li v-for="item in props.testprops" :key="item.Id"> {{ item.name }} </li> </ul> </div>  </div> </template> <script setup> import { defineProps, defineEmits, toRefs } from "vue"; const props = defineProps({ fatherMessage: { type: String, }, valNum: { type: Number, }, valBool: { type: Boolean, }, //接收对象 对象如果要使用某个值的时候 需要用 const vvv = toRefs(props.testprop).name testprop: { type: Object, }, //接收数组 testprops: { type: Array, default: () => [], }, }); //获取数组中某一个值 const vvv = toRefs(props.testprops[0]).name;   </script>   

二、子组件向父组件传递事件 采用defineEmits

父组件:

<template> <div> <h1>这是父组件</h1> <h2>事件传递</h2> <HH @add="eat" /> <div style="margin: 5px; border: 2px solid gold"> 子组件传值接收区： 变化数量:{{ num }} </div> <HH @getvale="getstr" /> <div style="margin: 5px; border: 2px solid rgb(26, 255, 186)"> 子组件传值接收区： 参数内容获取:{{ valstr }} </div> </div> </template>  <script setup> import { ref } from "vue"; import HH from "@/components/HelloWorld"; //事件传递 let valstr = ref();//接收内容 let num = ref(0);//数字加减 //触发加减事件 const eat = (value) => { num.value += value; }; //通过子组件的事件向父组件传递参数 const getstr = (value) => { valstr.value = value; }; </script>  <style> </style> 

子组件:

<template> <div> <h1>这是子组件</h1> <h2>自定义事件传递，子组件向父组件进行传递</h2> <button @click="meat">点击我</button> <button @click="getstr">点击我传递参数</button> </div> </template> <script setup> import { defineProps, defineEmits } from "vue"; const emit = defineEmits(["add"], ["getvale"]); // 自定义事件，可以自定义多个事件 const meat = () => { // 触发自定义事件 emit("add", 1); }; const getstr = () => { emit("getvale", "子组件传过来的值");//第一个参数为事件名称，第二个参数为参数数据 }; </script>