快捷導(dǎo)航

Vue父子組件屬性傳遞實現(xiàn)方法詳解

更新時間：2023年02月08日 09:03:56 作者：Zong_0915

這篇文章主要介紹了Vue父子組件屬性傳遞實現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫法寫父子組件之間的屬性傳遞，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

前言

這節(jié)我們主要從案例出發(fā)，用Vue3的寫法寫父子組件之間的屬性傳遞。

組件之間屬性的傳遞

我們定義一個Rate組件，具有以下功能：

接收來自外部組件傳入的參數(shù)，starCount代表星星個數(shù)。color代表星星顏色。
需要根據(jù)傳入星星的個數(shù)，展示對應(yīng)數(shù)量的星星。

父組件傳遞屬性給子組件

那么在編寫組件的時候，我們需要注意什么？

我們可以使用defineProps來規(guī)范傳遞數(shù)據(jù)的格式?？梢越Y(jié)合withDefaults來進行默認(rèn)值的賦值。
如果是響應(yīng)式數(shù)據(jù)的傳遞，在傳遞給子組件的時候，需要添加前綴 :。如果是常量，則不用。

我們在components目錄下創(chuàng)建完Rate.ts文件后。完整代碼如下：

<template>
  <div :style="fontstyle">
    {{ rate }}
  </div>
</template>
<script setup lang="ts">
import { computed, defineProps, withDefaults } from "vue";
// 定義父組件傳入的參數(shù)類型
interface Props {
  starCount: number;
  color: string;
}
// 規(guī)定傳值類型以及賦上默認(rèn)值
let props = withDefaults(defineProps<Props>(), {
  starCount: 0,
  color: "blue",
});
// 凡是計算有關(guān)的，我們都用computed來包裝
const rate = computed(() =>
  "★★★★★☆☆☆☆☆".slice(5 - props.starCount, 10 - props.starCount)
);
const fontstyle = computed(() => {
  return `color:${props.color};`;
});
</script>

外部組件調(diào)用如下：

<template>
  <Rate starCount="3"></Rate>
  <Rate starCount="4" color="red"></Rate>
  <Rate starCount="1" color="green"></Rate>
</template>
<script setup>
import Rate from "./components/Rate.vue";
</script>

最終效果如下：

子組件傳遞屬性給父組件

我們在編寫組件的時候，我們需要注意什么？

子組件：需要通過defineEmits函數(shù)，注冊一個自定義事件或者其他事件，例如click事件。然后手動觸發(fā)emit函數(shù)，調(diào)用該自定義事件，并傳遞參數(shù)。
父組件：引用子組件的時候，通過v-on綁定一個函數(shù)，指向子組件里面定義的事件。注意：v-on的效果等同于@符號。

定義一個子組件Son：

<template>
  <div style="margin: 10px; border: 2px solid red">
    我是子組件
    <button @click="transValue" style="margin: 5px;background:#caca88">傳值給父組件</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// 定義所要傳給父組件的值
const num = ref<number>(0);
// 使用defineEmits注冊一個自定義事件
const emit = defineEmits(["getValue"]);
// 點擊事件觸發(fā)emit，去調(diào)用我們注冊的自定義事件getValue,并傳遞value參數(shù)至父組件
const transValue = () => {
  num.value++;
  emit("getValue", num.value);
};
</script>

父組件Father：

<template>
  <div class="fa">
    <div style="margin: 10px;">我是父組件</div>
    父組件接收子組件傳的值：{{sonMessage}}
    <Son @getValue="getSonValue"></Son>
    <!-- <Son v-on:getValue="getSonValue"></Son> -->
  </div>
</template>
<script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";
const sonMessage = ref<String>('0')
const getSonValue = (value: String) => {
  sonMessage.value = value
}
</script>
<style scoped>
.fa{
  border: 3px solid cornflowerblue;
  width: 400px;
  text-align: center;
}
</style>

運行效果如下：