一、前言

作為國內(nèi)使用較多的前端框架——Vue，作為一名開發(fā)人員是必須要掌握的，小編作為一名后端人員。由于公司前端人員不足，也是學(xué)起來了Vue！

框架的精髓就在于，組件化！

一個(gè)頁面拆分幾個(gè)小組件，這就牽扯到組件之間的數(shù)據(jù)傳輸問題！

比較常用的就是：父子組件傳值，兄弟之間傳值場景小編這里還沒有遇到，所以本次就以常用的父子組件傳值來結(jié)合例子說一下！

二、組件化優(yōu)點(diǎn)

Vue組件化的優(yōu)點(diǎn)主要有以下幾個(gè)方面：

1. 更好的代碼復(fù)用性
   通過組件化的方式，將功能拆分為不同的模塊，每個(gè)模塊具有單一的職責(zé)，實(shí)現(xiàn)了代碼的分離和應(yīng)用的解耦。這樣，一個(gè)組件可以在多個(gè)頁面中復(fù)用，減少了代碼的重復(fù)編寫，提高了開發(fā)效率。
2. 更易于進(jìn)行分工合作
   通過組件化的方式，不同的開發(fā)者可以負(fù)責(zé)不同公共組件的開發(fā)，有利于項(xiàng)目的分工合作。每個(gè)開發(fā)者只需要關(guān)注自己負(fù)責(zé)的組件的開發(fā)工作，不會(huì)干擾到其他組件開發(fā)者的工作，提高了項(xiàng)目的開發(fā)效率和質(zhì)量。
3. 更易于維護(hù)和升級(jí)
   Vue組件化可以讓開發(fā)者更加專注于每個(gè)組件的功能，從而更方便地對代碼進(jìn)行維護(hù)和升級(jí)。如果在系統(tǒng)中要更換某個(gè)功能，只需升級(jí)其中的一個(gè)組件，而不需要更改其他組件。
4. 更好的靈活性和可復(fù)用性
   Vue組件化能帶來更好的靈活性，通過組合不同的組件可以快速搭建出新的頁面，這樣即使項(xiàng)目需求變更，也能通過復(fù)用已有的組件來快速實(shí)現(xiàn)新的功能。
5. 更直觀的數(shù)據(jù)流
   由于Vue數(shù)據(jù)流的單向流動(dòng)方式，讓我們更容易追蹤數(shù)據(jù)的變化，從而更好地管理數(shù)據(jù)狀態(tài)。通過組件的props和$emit交互，讓數(shù)據(jù)的傳遞具有一定的規(guī)范和限制，減少了代碼耦合度。

總之，Vue組件化能夠帶來更好的代碼復(fù)用性、易于維護(hù)和升級(jí)、靈活性、直觀的數(shù)據(jù)流和分工合作，是現(xiàn)代Web開發(fā)的必然選擇。

三、實(shí)戰(zhàn)

在Vue中，父子組件傳值的方式有很多種，本文介紹其中比較常用的兩種方式：props和?

1、App.vue

在根容器中展示我們的父組件！

<template>
  <div id="app">
    <ParentComponent></ParentComponent>
  </div>
</template>

<script>
import ParentComponent from "@/views/ParentComponent";

export default {
  name: 'App',
  components: {
    ParentComponent,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2、ParentComponent.vue

這是父容器：

components: { ChildComponent }:父組件中引入并注冊子組件，這樣才能在父組件的模板中使用。

:message="message"：父組件的message數(shù)據(jù)傳遞到子組件中，需要使用v-bind或者簡寫的":"來將數(shù)據(jù)綁定到子組件標(biāo)簽上

@updateNum="updateNum"：子組件向父組件傳遞一個(gè)自定義事件，父組件可以監(jiān)聽這個(gè)事件并接收傳遞過來的數(shù)據(jù)

<template>
  <div>
    <h1>這是子組件傳過來的num數(shù)據(jù): {{ num }}</h1>
    <ChildComponent :message="message" @updateNum="updateNum"></ChildComponent>
  </div>
</template>

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

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
  data () {
    return {
      name: 'Vue.js',
      message: '我是父組件的message',
      num:0,
    }
  },

  methods: {
    updateNum (newNum) {
      this.num = newNum
    },
  }
}
</script>

<style scoped>

</style>

3、ChildComponent.vue

這是子組件：

子組件使用：props來接收數(shù)據(jù)，變量名稱直接可以使用

有一些參數(shù)可以根據(jù)自己要求添加：

this.$emit('updateNum', this.num)：子組件可以通過$emit方法來發(fā)布一個(gè)自定義事件，父組件可以監(jiān)聽這個(gè)事件并接收傳遞過來的數(shù)據(jù)，可以不傳值！?

子組件可以通過emit方法來發(fā)布一個(gè)自定義事件，父組件可以監(jiān)聽這個(gè)事件并接收傳遞過來的數(shù)據(jù)，可以不傳值！

第一個(gè)參數(shù)一定要和父組件的事件名稱一致??！

<template>
  <div class="box">
    <p>這是父傳過來的數(shù)據(jù)：{{ message }}</p>
    <button @click="updateParentNum">點(diǎn)擊+1</button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    message: {
      type: String,
      default: '默認(rèn)值',
      required: true
    },
  },

  data () {
    return {
      newMessage: '我是子組件的數(shù)據(jù)',
      num: 0
    }
  },

  methods: {
    updateParentNum () {
      this.num =  ++ this.num
      // 可以有值，可以不傳遞值
      this.$emit('updateNum', this.num)
    }
  }
}
</script>

<style scoped>
.box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300px;
  background-color: pink;
}
</style>

4、效果

父組件的message的值會(huì)傳遞給子組件，并在子組件展示。

每次點(diǎn)擊子組件的+1就會(huì)向父組件發(fā)布事件并把num傳遞給父組件。

四、總結(jié)

從上述兩種方式可以看出，props傳值需要在子組件中預(yù)先定義需要接收的屬性，在父組件中傳遞數(shù)據(jù)時(shí)需要使用v-bind或者":"進(jìn)行綁定。而$emit向父組件傳值則需要在子組件中發(fā)布自定義事件，父組件中需要監(jiān)聽這個(gè)事件并在事件處理函數(shù)中獲取傳遞過來的數(shù)據(jù)。

在實(shí)際開發(fā)中，我們需要根據(jù)具體的場景來選擇使用哪種方式進(jìn)行父子組件之間的數(shù)據(jù)傳遞，以便讓我們的代碼更加簡潔、高效、穩(wěn)定。