Vue元件化之父子元件傳值

一、前言

作為國内使用較多的前端架構——Vue，作為一名開發人員是必須要掌握的，小編作為一名後端人員。由于公司前端人員不足，也是學起來了Vue！

架構的精髓就在于，元件化！

一個頁面拆分幾個小元件，這就牽扯到元件之間的資料傳輸問題！

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

二、元件化優點

Vue元件化的優點主要有以下幾個方面：

1. 更好的代碼複用性

通過元件化的方式，将功能拆分為不同的子產品，每個子產品具有單一的職責，實作了代碼的分離和應用的解耦。這樣，一個元件可以在多個頁面中複用，減少了代碼的重複編寫，提高了開發效率。

1. 更易于維護和更新

Vue元件化可以讓開發者更加專注于每個元件的功能，進而更友善地對代碼進行維護和更新。如果在系統中要更換某個功能，隻需更新其中的一個元件，而不需要更改其他元件。

1. 更好的靈活性和可複用性

Vue元件化能帶來更好的靈活性，通過組合不同的元件可以快速搭建出新的頁面，這樣即使項目需求變更，也能通過複用已有的元件來快速實作新的功能。

1. 更直覺的資料流

由于Vue資料流的單向流動方式，讓我們更容易追蹤資料的變化，進而更好地管理資料狀态。通過元件的props和$emit互動，讓資料的傳遞具有一定的規範和限制，減少了代碼耦合度。

總之，Vue元件化能夠帶來更好的代碼複用性、易于維護和更新、靈活性、直覺的資料流和分工合作，是現代Web開發的必然選擇。

三、實戰

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

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資料傳遞到子元件中，需要使用v-bind或者簡寫的":"來将資料綁定到子元件标簽上

@updateNum="updateNum"：子元件向父元件傳遞一個自定義事件，父元件可以監聽這個事件并接收傳遞過來的資料

<template>
  <div>
    <h1>這是子元件傳過來的num資料: {{ 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來接收資料，變量名稱直接可以使用

有一些參數可以根據自己要求添加：

關鍵字	值	解釋
type	String	資料類型：String、Number、Boolean、Array、Object、Date、Function、Symbol
default	'這是預設值'	如果不傳值，預設值
required	true	是否必填

this.$emit('updateNum', this.num)：子元件可以通過$emit方法來釋出一個自定義事件，父元件可以監聽這個事件并接收傳遞過來的資料，可以不傳值！

第一個參數一定要和父元件的事件名稱一緻！！

<template>
  <div class="box">
    <p>這是父傳過來的資料：{{ message }}</p>
    <button @click="updateParentNum">點選+1</button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    message: {
      type: String,
      default: '預設值',
      required: true
    },
  },

  data () {
    return {
      newMessage: '我是子元件的資料',
      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的值會傳遞給子元件，并在子元件展示

每次點選子元件的+1就會向父元件釋出事件并把num傳遞給父元件

在這裡插入圖檔描述

四、總結

從上述兩種方式可以看出，props傳值需要在子元件中預先定義需要接收的屬性，在父元件中傳遞資料時需要使用v-bind或者":"進行綁定。而$emit向父元件傳值則需要在子元件中釋出自定義事件，父元件中需要監聽這個事件并在事件處理函數中擷取傳遞過來的資料。

在實際開發中，我們需要根據具體的場景來選擇使用哪種方式進行父子元件之間的資料傳遞，以便讓我們的代碼更加簡潔、高效、穩定。

如果對你有幫助，還請動一下您的發财小手，關注一下公衆号哈！！謝謝您的關注！！文章首發看！！！