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>