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 = https://www.cnblogs.com/QsFavour/archive/2023/07/11/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>

標籤：其他

上一篇：基于分步表單的實踐探索

下一篇：返回列表