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

盡量把紛繁的知識，肢解重組成為可以堆砌的知識。

我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。

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

什麽是數據流

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

組件內部的數據來源

1、其他組件傳遞的數據。2、服務器返回的數據。3、地址欄傳遞的數據。4、狀態管理系統傳遞的數據。

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

2、從服務器返回的數據。也不做介紹。

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

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
      }
    }
  }

這是 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 )，這是訂閱；發布是由瀏覽器內核操作的。還是不懂的話，網上的資料更多。

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

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

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

2、TopNav.vue 中添加 methods，其中 this.$emit(‘click-event‘, ‘點擊‘) 便是發布事件：

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

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

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

4、About.vue 中定義 click 函數

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

保存後運行，單擊【推薦】，控制臺顯示 “點擊”。

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

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

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

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