純小白入手 vue3.0 CLI - 2.7 - 組件之間的數據流

vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html

儘可能把紛繁的知識，肢解重組成爲能夠堆砌的知識。

個人 github 地址 - vue3.0Study - 階段學習成果都會創建分支。

==========================

什麼是數據流

拿烽火戲諸侯的典故來理解：典故里的數據是什麼？戰亂。如何傳遞數據？用烽火。儘管這個典故傳遞的是假數據，但它確實傳遞了數據。在這個典故里，數據只能單向傳遞，一個烽火臺一個烽火臺的往下傳遞。這是數據流。

組件內部的數據來源

一、其餘組件傳遞的數據。二、服務器返回的數據。三、地址欄傳遞的數據。四、狀態管理系統傳遞的數據。

3 和 4 分別涉及到路由和狀態管理的知識，之後學習到會介紹。

二、從服務器返回的數據。也不作介紹。

本文着重介紹組件之間傳遞數據的方式。

props 傳遞數據

前面幾篇文章已經用過。這裏介紹其餘的東西。

在大型項目中，大量的組件通常分由不一樣的人進行開發，那麼組件之間傳遞數據，須要告訴組件使用者，該組件接受的數據的類型。若沒有溝經過，就開始傳遞數據，就會出現各類問題，頗有可能沒有錯誤提示。

對比下面兩種 props 的聲明方式：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

上面的是用 []；下面的是對象字面量，key 是組件屬性，value 是該屬性接受的類型。下面是完整的 props 驗證的代碼：

  props: {
    // 基礎的類型檢查 (`null` 匹配任何類型)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

props 驗證代碼

這是 vue 中進行類型監測的特性，有效的解決了組件之間傳遞未知數據所帶來的不肯定性。

除了字符串類型之外，任何其餘的數據類型，傳遞靜態數據都必須使用 v-bind 進行綁定：

// 傳遞數字
<blog-post v-bind:likes="42"></blog-post>
// 布爾值
<blog-post v-bind:is-published="false"></blog-post>
// 數組
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
// 對象字面量
<blog-post v-bind:author="{ name: 'nDos'}"></blog-post>

props 傳遞數據只能單向傳遞，只能由父組件向子組件傳遞數據。所以，子組件沒有權限修改 props 中屬性的值。

子組件可以控制自身 data 和 computed，所以能夠採用如下方法來達到貌似「修改」 props 的作法 ( 實際改變的是自身 data 和 computed )：

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

到這裏，props 單向傳遞數據的內容已介紹完 ( 在實際的工程應用中，務必作到不要修改 this.props 的屬性值，這會讓你的項目變得難以理解和調試 )。不過，還有 非 props 特性，特性合併和替換、禁止特性繼承 等概念須要瞭解，請參見官方教程。

好奇： props 和 data 中存在相同的名稱的屬性會如何？

明白了。報錯：[Vue warn]: The data property "title" is already declared as a prop. Use prop default value instead.

組件事件 傳遞數據

props 是父組件餵給子組件飯。組件事件  ( $emit ) 是子組件拉屎，父組件撿回來。 $emit 的原理是發佈訂閱模式，網上有不少有關這方面的內容。

什麼是發佈訂閱模式？ window.addEventLinster( 'load', callback )，這是訂閱；發佈是由瀏覽器內核操做的。仍是不懂的話，網上的資料更多。

下面一步一步實現 組件事件。

一、修改 TopNav.vue 中的模版代碼，添加點擊事件：

<template>
  <span class="topnav" @click="click">
      {{title}}
  </span>
</template>

二、TopNav.vue 中添加 methods，其中 this.$emit('click-event', '點擊') 即是發佈事件：

  methods: {
      click: function(){
          this.$emit('click-event', '點擊')
      }
  }

三、About.vue 中修改其中模板代碼，其中的 @click-event="click" 即是訂閱事件，而 click 即是 callback 程序：

<top-nav title="推薦" @click-event="click"/>

四、About.vue 中定義 click 函數

  methods: {
    click(e){
      console.log(e)
    }
  }

保存後運行，單擊【推薦】，控制檯顯示 「點擊」。

組件事件簡單的用法，就這麼簡單。實際上 vue 還提供了不少其餘的東西，好比 v-model、將原生事件綁定到組件上、.sync 修飾符(爲了簡化代碼的語法糖) 等內容。去往官方教程進行深造。

==========================

組件的數據流便介紹到這裏，相關代碼也已經上傳至 GitHub.