Vue篇/第八 組件通訊（組件傳值）

1、組件通訊（組件傳值）

相關學習連接：http://www.javashuo.com/article/p-fcwfcyzw-dp.html

////學習連接：http://www.javashuo.com/article/p-tlbacsey-dc.html

學習連接：http://www.javashuo.com/article/p-fvcvvfcx-bg.html

組件間的傳值： http://www.javashuo.com/article/p-tetzwpgl-hg.html

1.1父子組件通訊

父組件
<子組件標籤 :變量='要傳遞的數據'></子組件標籤>
子組件
props：['變量']

1.2子父組件通訊

父組件
<子組件標籤 @自定義事件='事件名'></子組件標籤>
methods:{
 事件名(e){
   //e就是傳遞過來的數據
 }
}
子組件
子組件中要有一個觸發事件
<button @click='toFather'></button>
methods:{
 toFather(){
   this.$emit('自定義事件名稱','要傳遞的數據')
 }
}
​

1.3非父子組件通訊（兄弟組件通訊）

案例解析：http://www.javashuo.com/article/p-pnozcdnt-cs.html

定義一箇中央事件總線（中轉站）
let EventBus = new Vue() 
兄弟A中
created(){}
或者
mounted(){
  EventBus.$on('暗號',(d)=>{
    //d就是傳遞過來的數據
  })
}
兄弟b中
兄弟b中要有一個觸發事件
<button @click='toFather'></button>
methods:{
  toFather(){
    EventBus.$emit('暗號','要傳遞的數據')
  }
}

2、vue-cli(腳手架)

超詳細解釋：http://www.javashuo.com/article/p-sjdgmsgt-gw.html

解釋2：https://www.jianshu.com/p/1ee1c410dc67

vue相關概念：https://www.jianshu.com/p/6803b42562a5?utm_campaign

2、vue-cli(腳手架)

注意點

若是你第一次進公司或者get到一臺新電腦，首要你要安裝環境，執行如下兩個步驟且執行一次。

• 全局建立webpack環境 npm install -g webpack

• 全局建立腳手架

  建立腳手架的命名 npm install -g @vue/cli 這個是獲取最新腳手架版本的方式 由於npm install -g @vue/cli這個命令式最新腳手架的命令，咱們要下載項目是低版本的建立方式，因此咱們要向下兼容，因此要安裝一下npm install -g @vue/cli-init 腳手架中用到的vue.js的核心庫版本是2.5.2這個命令下載的腳手架的版本是4.2.2 建立2.x版本的腳手架命令 npm install -g vue-cli

• 建立項目

  2.x版本的方式下的項目建立 vue init webpack mydemo(項目名稱) 3.x以上版本建立項目的方式 vue create mydemo(項目名稱)

• 啓動方式

  進入到項目中 npm run dev 或者 npm start

vue中版本的概念

vue3.0指的是核心庫，做者只是公佈了源碼，並無實際上線。你們直接下載vue.js庫的時候用到的是v2.6.11

• typeScript（微軟開發的）

  js超集（它包含全部js的定義方法），有本身的獨特命名規則

2.1建立方式

2.2目錄結構

• build 環境的配置文件夾

  build.js 打包的配置文件 check-versions.js node和npm版本檢查文件 utils.js 構建工具 vue-loader.conf.js 加載器的配置文件 webpack.base.conf.js webpack基本配置 webpack.dev.conf.js webpack開發環境配置 webpack.prod.conf.js webpack生產環境配置

• config 項目配置文件夾

  dev.env.js 開發環境的配置 index.js 基本配置文件 prod.env.js 生產環境的配置

• node_modules 第三方的依賴包管理

• src 全部代碼管理的文件夾

  assets 靜態資源（這裏面的內容會被打包）這裏面放js,css,img components 組件文件夾 router 路由 App.vue 根組件 main.js 主入口文件

• static 靜態資源管理文件夾（這裏面的內容不會打包，而是原樣輸出）

• .babelrc 轉譯文件（把ES6轉成ES5）

• .editorconfig 編輯器的配置文件

• .gitignore 用git上傳文件的時候要 忽略的文件或者文件夾

• .postcssrc.js css相關配置

• index.html 主頁

• package-lock.json 版本鎖死文件

• package.json 配置管理文件

• README.md 閱讀指南

• 配置文件有修改的時候，必需要重啓項目，npm run dev！普通的.vue文件，修改無須重啓。

3、單頁面應用和多頁面應用的概念

3.1單頁應用（single-page application）

• 概念

  整個項目只有一個index.html。經過路由切換或者組件切換去完成頁面切換的。它是局部刷新。優勢，響應速度快，用戶體驗好。缺點，不利於SEO（搜索引擎優化）優化，首頁加載過慢。表明案例網站 https://es6.ruanyifeng.com/

3.2多頁應用（multi-page application）

整個項目多個.html文件。它是總體刷新。優勢：利於SEO優化。缺點：用戶體驗較差

4、腳手架中組件的傳值方式

4.1清空腳手（腳手架初始化）

刪除掉components文件夾下面的HelloWord.vue文件，而後在router文件夾中找到index.js 刪除hello相關的東西。把代碼變成 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ ] }) 最後清空app.vue文件變成：

<template>
 <div id="app">
 </div>
</template>
​
<script>
export default {
}
</script>
​
<style>
​
</style>

 

面試題

• 什麼是組件通訊

• 說說你對 SPA 單頁面的理解，它的優缺點分別是什麼？

  SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會由於用戶的操做而進行頁面的從新加載或跳轉；取而代之的是利用路由機制實現 HTML 內容的變換，UI 與用戶的交互，避免頁面的從新加載。 優勢：用戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染；基於上面一點，SPA 相對對服務器壓力小；先後端職責分離，架構清晰，前端進行交互邏輯，後端負責數據處理； 缺點：初次加載耗時多：爲實現單頁 Web 應用功能及顯示效果，須要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載；前進後退路由管理：因爲單頁應用在一個頁面中顯示全部的內容，因此不能使用瀏覽器的前進後退功能，全部的頁面切換須要本身創建堆棧管理；SEO 難度較大：因爲全部的內容都在一個頁面中動態替換顯示，因此在 SEO 上其有着自然的弱勢。

• 單頁應用和多頁應用的區別

  單頁面應用（SinglePage Web Application，SPA）多頁面應用（MultiPage Application，MPA） 組成一個外殼頁面和多個頁面片斷組成多個完整頁面構成資源共用(css,js)共用，只需在外殼部分加載不共用，每一個頁面都須要加載 刷新方式 頁面局部刷新或更改 整頁刷新 url 模式 a.com/#/pageone a.com/#/pagetwo a.com/pageone.html a.com/pagetwo.html 用戶體驗 頁面片斷間的切換快，用戶體驗良好 頁面切換加載緩慢，流暢度不夠，用戶體驗比較差 轉場動畫 容易實現 沒法實現 數據傳遞 容易 依賴 url傳參、或者cookie 、localStorage等 搜索引擎優化(SEO) 須要單獨方案、實現較爲困難、不利於SEO檢索 可利用服務器端渲染(SSR)優化 實現方法簡易 試用範圍 高要求的體驗度、追求界面流暢的應用 適用於追求高度支持搜索引擎的應用 開發成本 較高，常需藉助專業的框架 較低 ，但頁面重複代碼多 維護成本 相對容易 相對複雜