Vue2父子組件傳值舉例詳解

更新時(shí)間：2023年05月26日 09:07:54 作者：程序員小趙OvO

這篇文章主要給大家介紹了關(guān)于Vue2父子組件傳值的相關(guān)資料,Vue 2.0 中父子組件之間的傳值可以通過(guò)屬性(prop)和事件(event)實(shí)現(xiàn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在日常開(kāi)發(fā)中，我們經(jīng)常會(huì)在一個(gè)組件中嵌套另外一個(gè)組件，那么如果我們父組件要向子組件傳值該怎么辦？子組件向父組件通信又該怎么辦？本文將詳細(xì)舉例說(shuō)明這些問(wèn)題。

父向子通信

問(wèn)題描述

現(xiàn)在我們有個(gè)需求，我們要分別顯示父和子的信息，我們當(dāng)然可以在一個(gè)組件中直接顯示全部信息，但是萬(wàn)一以后又來(lái)一個(gè)需求：我們要在母和子的信息，那其實(shí)這里就存在冗余了，所以我們把子組件單獨(dú)封裝成一個(gè)新的組件。那么這里就會(huì)出現(xiàn)一個(gè)問(wèn)題，子組件的信息該如何從父組件傳過(guò)去呢？

解決方案

使用vue提供的prop屬性，下面邊看代碼邊分析：

父組件定義

<template>
  <div class="father">
    這里是父組件，我們會(huì)在這里展示父的信息
    {{ fatherName }}
    {{ fatherAge }}
    <son/>
  </div>
</template>
<script>
  import son from "@/components/son";
  export default {
    name: "father",
    components: {
      son
    },
    data() {
      return {
        fatherName: "張三",
        fatherAge: 12
      }
    }
  }
</script>
<style lang="css">
  .father{
    border: 1px solid black;
  }
</style>

子組件定義

<template>
  <div class="son">
    這里是子組件，我們會(huì)在這里展示子的信息
  </div>
</template>
<script>
  export default {
    name: "son"
  }
</script>
<style scoped>
  .son{
    margin: 10px;
    border: 1px solid red;
  }
</style>

使用:attribute屬性向子組件傳入值

<template>
  <div class="father">
    這里是父組件，我們會(huì)在這里展示父的信息
    {{ fatherName }}
    {{ fatherAge }}
    <son :sonInfo="sonInfo"/>
  </div>
</template>

<script>
import son from "@/components/son";

export default {
  name: "father",
  components: {
    son
  },
  data() {
    return {
      fatherName: "張三",
      fatherAge: 12,
      sonInfo: {
        sonName: "王小虎",
        sonAge: 6
      }
    }
  }
}
</script>
<style lang="css">
.father {
  border: 1px solid black;
}
</style>

子組件通過(guò)props屬性接收父組件傳過(guò)來(lái)的值，這里的名字要和父組件傳的值對(duì)應(yīng)

<template>
  <div class="son">
    這里是子組件，我們會(huì)在這里展示子的信息
    {{ sonInfo.sonName }}
    {{ sonInfo.sonAge }}
  </div>
</template>
<script>
export default {
  name: "son",
  props: ["sonInfo"]
}
</script>
<style scoped>
.son {
  margin: 10px;
  border: 1px solid red;
}
</style>

測(cè)試

擴(kuò)展

上述的例子解決了父子組件傳值的基本問(wèn)題，當(dāng)然prop的用法還有很多，我們可以在vue2官網(wǎng)上看到

Prop的大小寫

camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

Prop 類型

我們之前使用以字符串?dāng)?shù)組形式列出的 prop

props: ["sonInfo"]

我們也可以給每一個(gè)prop指定對(duì)應(yīng)的值

props: {
  title: String,//字符串
  likes: Number,//數(shù)字
  isPublished: Boolean,//布爾
  commentIds: Array,//數(shù)組
  author: Object,//對(duì)象
  callback: Function,//函數(shù)
  contactsPromise: Promise //異步延遲對(duì)象
}

傳遞靜態(tài)或動(dòng)態(tài) Prop

之前我們傳遞的是動(dòng)態(tài)的Prop，可以動(dòng)態(tài)賦值

<son :sonInfo="sonInfo"/>

我們也可以傳遞靜態(tài)的

<son :sonInfo="sonInfo" sex="1"/>

props: ["sonInfo", "sex"]

單向數(shù)據(jù)流

所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
額外的，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。

官方這段話表明了，我們對(duì)于父組件傳過(guò)來(lái)的值最不要直接修改，官方例舉了兩個(gè)常用的變更案例
1.這個(gè) prop 用來(lái)傳遞一個(gè)初始值；這個(gè)子組件接下來(lái)希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來(lái)使用

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2.這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

類型校驗(yàn)

之前我們使用字符串?dāng)?shù)組形式列出的 prop，父組件不知道子組件prop值的類型，可能傳值的時(shí)候傳錯(cuò)，所以我們可以給值指定類型。如果有一個(gè)需求沒(méi)有被滿足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你

Vue.component('my-component', {
  props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)
    propA: Number,
    // 多個(gè)可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對(duì)象
    propE: {
      type: Object,
      // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        // 這個(gè)值必須匹配下列字符串中的一個(gè)
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
})

當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開(kāi)發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告

子向父通信

問(wèn)題描述

既然父可以向子傳值，那么子是否可以通信父呢？當(dāng)然可以，這時(shí)候我們要借助vue的 e m i t 和 emit和 emit和on，下面我們看代碼：

解決方案

子組件

<template>
  <div class="son">
    這里是子組件
    <button @click="emit">使用emit向父組件通信</button>
  </div>
</template>
<script>
export default {
  name: "son",
  methods:{
    emit(){
      this.$emit('sayHi',"tom")
    }
  }
}
</script>
<style scoped>
.son {
  margin: 10px;
  border: 1px solid red;
}
</style>

父組件

<template>
  <div class="father">
    這里是父組件
    <son sex="1" @sayHi="sayHi"/>
  </div>
</template>
<script>
import son from "@/components/son";
export default {
  name: "father",
  components: {
    son
  },
  data() {
    return {}
  }, methods: {
    sayHi(name) {
      console.log("sayHi:"+name)
    }
  }
}
</script>
<style lang="css">
.father {
  border: 1px solid black;
}
</style>

測(cè)試

點(diǎn)擊按鈕，控制臺(tái)輸出sayHi tom

分析

這里首先介紹一下vue提供的兩個(gè)重要函數(shù)emit和on

on

監(jiān)聽(tīng)當(dāng)前實(shí)例上的自定義事件。事件可以由 $emit 觸發(fā)。回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。
上述例子的 @sayHi="sayHi"就是在監(jiān)聽(tīng)sayHi事件，這里采用了簡(jiǎn)寫形式，完整形式是v-on:sayHi=“sayHi”，我們平時(shí)用的比較多的就是監(jiān)聽(tīng)點(diǎn)擊事件，而這里我們就是監(jiān)聽(tīng)了我們自定義的事件

emit

觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

當(dāng)我們監(jiān)聽(tīng)了自定義事件，我們就可以在子組件中觸發(fā)事件，this.$emit(‘sayHi’,“tom”)，這樣就會(huì)調(diào)用監(jiān)聽(tīng)的回調(diào)函數(shù)，并且將附加參數(shù)tom傳入回調(diào)函數(shù)

非父子通信

除了上述的父子組件通信，我們最后還可以在非父子組件之間傳值，某些場(chǎng)景下會(huì)用到。下面看代碼：

事件總線

import Vue from "vue";
export default new Vue;

組件B

<template>
  <div>
    組件B
    {{ value }}
  </div>
</template>
<script>
import bus from "@/components/bus";
export default {
  name: "ComponentB",
  data() {
    return {
      value: "oldVal"
    }
  }, created() {
    bus.$on("changeVal", newVal => {
      this.value = "newVal"
    })
  }
}
</script>
<style scoped>
</style>

組件A

<template>
  <div>
    組件A
    <button @click="communicate">組件A->組件B</button>
  </div>
</template>
<script>
import bus from "@/components/bus";
export default {
  name: "ComponentA",
  methods:{
    communicate(){
      bus.$emit("changeVal","newVal")
    }
  }
}
</script>
<style scoped>
</style>

測(cè)試

組件B的值由oldVal->newVal

分析

這里引入了事件總線（event bus）的概念，事件總線：事件發(fā)送者將事件消息發(fā)送到一個(gè)事件總線上，事件訂閱者向事件總線訂閱和接收事件，然后再處理接收到的事件

而我們這里的事件總線的載體就是一個(gè)Vue的實(shí)例對(duì)象，因?yàn)樵趀mit和on都是Vue的一個(gè)實(shí)例方法。

當(dāng)然我們還可以使用$attrs / listeners來(lái)實(shí)現(xiàn)類似效果，這里就不多做介紹了，有興趣的讀者可以自行了解

但是如果學(xué)過(guò)Vuex的話，利用Vuex來(lái)傳值會(huì)很方便，Vuex之后會(huì)慢慢講，不急。學(xué)習(xí)是個(gè)漫長(zhǎng)的過(guò)程，慢慢來(lái)