1. 導語
承接上文：Vue 2.x 實戰(zhàn)之后臺管理系統(tǒng)開發(fā)（一）
在上一篇文章中沾谜，我詳細敘述了如何創(chuàng)建項目框架和引入各種后臺常用插件伶授，做好這些準備工作后涮因，我們就可以著手進行頁面的開發(fā)了拒迅。在開發(fā)過程中沥寥，會遇到一些常見的需求和問題颤练，我整理了一下既忆，有以下幾點。
2. 常見需求
01. 父子組件通信
a. 父 -> 子（父組件傳遞數(shù)據(jù)給子組件）
使用 props嗦玖，具體查看文檔 - 使用 Prop 傳遞數(shù)據(jù)（https://cn.vuejs.org/v2/guide/components.html#使用-Prop-傳遞數(shù)據(jù)）
b. 父 -> 子（在父組件上調(diào)用子組件內(nèi)的方法）
使用 ref患雇，具體查看文檔 - 子組件索引（https://cn.vuejs.org/v2/guide/components.html#子組件索引）
<!--父組件 template-->
<div id="parent">
<!--子組件-->
<user-profile ref="profile"></user-profile>
</div>
// 父組件 script
this.$refs.profile.someMethod();
注意：如果在子組件上設置 ref 屬性，則可以通過 this.$refs 獲取到該子組件對象宇挫，如果在普通的 html 標簽上設置 ref 屬性苛吱，則獲取到的是 Dom 節(jié)點。
c. 子 -> 父（在父組件上獲取子組件內(nèi)的數(shù)據(jù)）
同上器瘪，也是利用 ref
// 父組件 script
let childData = this.$refs.profile.someData;
d. 子 -> 父（子組件內(nèi)觸發(fā)事件翠储，父組件監(jiān)聽事件）
父組件可以在使用子組件的地方直接用
v-on來監(jiān)聽子組件觸發(fā)的事件，具體查看文檔 - 使用 v-on 綁定自定義事件（https://cn.vuejs.org/v2/guide/components.html#使用-v-on-綁定自定義事件）
<!--父組件 template-->
<div id="parent">
<!--子組件-->
<user-profile @childTrigger="parentHandle"></user-profile>
</div>
// 父組件 script
methods: {
parentHandle(params){
// 這個方法在子組件 emit childTrigger 事件后會執(zhí)行
// params 為子組件里觸發(fā)事件時傳的參數(shù)
}
}
// 子組件 user-profile script
this.$emit('childTrigger', params);
e. 子 -> 父（子組件傳值橡疼，父組件里使用援所，具體實現(xiàn)見 03）
01總結：
應用場景示例：在父組件上打開側邊欄子組件，可以傳 prop visible（true）來控制側邊欄打開欣除；側邊欄內(nèi)部有關閉按鈕住拭，就在點擊關閉按鈕后觸發(fā)一個事件，父組件監(jiān)聽事件執(zhí)行方法將 data visible 改為false。
PS：父組件傳值到子組件滔岳，傳的值是Object類型瘟檩，子組件使用v-model可以修改該值（將某個表單元素的v-model設為該值），父組件可直接獲取到改變后的值澈蟆。
02. 全局函數(shù)
有時候會用到一些工具類函數(shù)墨辛，希望可以全局調(diào)用，而不是局限于某個組件中趴俘。
Step 1：
在 項目根目錄/static/js/ 目錄下新建一個 util.js 文件睹簇，將常用的工具函數(shù)寫在這里面。
Step 2：
在 index.html 里面引入 util.js寥闪，就可以在 .vue 文件里使用那些方法了太惠，如下：
<body>
<div id="app"></div>
<!-- 引入常用 js 方法 -->
<script type="text/javascript" src="/static/js/util.js"></script>
<!-- built files will be auto injected -->
</body>
02總結：
使用這個方法可以使得一些使用頻率高的函數(shù)可以在所有.vue文件中被調(diào)用，笨拙而又簡單疲憋。
03. slot
以前看文檔時一直不理解如何使用 slot凿渊，現(xiàn)在用多了 elementui 的組件之后，就漸漸發(fā)現(xiàn)了它的實用性缚柳。
簡單來說埃脏，使用 slot 可以使我們做到：在父組件里使用子組件時，在子組件里插入一些自定義的內(nèi)容（html 代碼啥的）秋忙，具體查看文檔：http://cn.vuejs.org/v2/guide/components.html#使用-Slot-分發(fā)內(nèi)容彩掐；
更神奇的功能是 作用域插槽，可以讓我們在父組件里使用子組件時灰追，獲取子組件傳來的數(shù)據(jù)堵幽，具體查看文檔：http://cn.vuejs.org/v2/guide/components.html#作用域插槽。
簡單應用示例：
<!-- a-button 子組件 -->
<button type="button" class="a-button" @click="$emit('btn-click')"><slot></slot></button>
<!-- 這里監(jiān)聽了 button 的 click 事件弹澎，然后又觸發(fā)了 btn-click 事件 -->
<!-- 父組件 -->
<a-button @btn-click="handleClick">這里寫的東西會覆蓋子組件里的 slot 標簽所在的位置</a-button>
<!-- 這里監(jiān)聽了子元素觸發(fā)的 btn-click 事件朴下，然后執(zhí)行 handleClick 函數(shù) -->
渲染結果：
<button type="button" class="a-button">這里寫的東西會覆蓋子組件里的 slot 標簽所在的位置</button>
可以應用簡單的 slot 來達到為不同的按鈕填充文字的目的：
<a-button @click="handleClick">詳情</a-button>
<a-button @click="handleClick">搜索</a-button>
<!-- 渲染結果 -->
<button type="button" class="a-button">詳情</button>
<button type="button" class="a-button">搜索</button>
作用域插槽示例：
<!-- 子組件 -->
<div class="child">
<!-- slot 這個位置會在子組件被使用時被父組件傳來的 html 代碼覆蓋 -->
<!-- slot 上的 text/child 就相當于傳給父組件的 props (假設 name 為子組件的 data，name: someChild) -->
<slot text="hello from child" :child="name"></slot>
</div>
在父級中苦蒿，具有特殊屬性 scope 的 <template> 元素殴胧，表示它是作用域插槽的模板。scope 的值對應一個臨時變量名刽肠，此變量接收從子組件中傳遞的 prop 對象：
<!-- 父組件 -->
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
<span>{{ props.child }}</span>
</template>
</child>
</div>
渲染結果：
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
<span>someChild</span>
</div>
</div>
03總結：
應用場景示例：elementui 的 button 組件中有簡單插槽的使用溃肪，table 組件則使用到了 作用域插槽。
<!-- button 組件 -->
<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="text">文字按鈕</el-button>
<!-- table 組件 -->
<el-table
:data="tableData">
<el-table-column
prop="zip"
label="郵編"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template scope="scope">
<el-button
<!-- 可以通過 scope.$index 獲取到當前行的索引 -->
@click.native.prevent="deleteRow(scope.$index)">
移除
</el-button>
</template>
</el-table-column>
</el-table>
04. router 使用小記
vue-router 的使用音五，簡單來說就是通過配置，實現(xiàn)在不同的 url 路徑下羔沙，頁面渲染不同的組件躺涝。具體查看文檔：vue-router 2。
使用示例
一級路由：
<!-- App.vue -->
<!-- 該組件為最高級父組件，使用 router-view 來根據(jù)路徑確定要顯示的子組件 -->
<template>
<div id="app">
<!-- router-view 位置用來顯示組件坚嗜，如顯示下面的 index.vue -->
<router-view></router-view>
</div>
</template>
二級路由（路由可嵌套）：
<!-- page/index.vue -->
<!-- 該組件包含一個頂部欄和側邊菜單欄夯膀，內(nèi)容區(qū)使用 router-view 來根據(jù) url 路徑顯示子組件 -->
<template>
<div class="index">
<!-- 頂部導航條 -->
<header class="main-header">
...
</header>
<!-- /頂部導航條 -->
<!-- 側邊導航欄 -->
<aside class="main-sidebar sidebar-gradient">
...
</aside>
<!-- /側邊導航欄 -->
<!-- 根據(jù)頁面一級菜單的點擊而進行切換的內(nèi)容區(qū) -->
<transition name="fade">
<!-- router-view 位置用來顯示組件 -->
<router-view></router-view>
</transition>
<!-- /內(nèi)容區(qū) -->
</div>
</template>
router 配置：
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
// 引入組件
import index from 'page/index'; // 該組件包含一個頂部欄和側邊菜單欄，內(nèi)容區(qū)使用 router-view 來根據(jù) url 路徑顯示子組件
import notFoundComponent from 'page/404'; // 該組件為 404 頁面苍蔬，當你路由使用 history 模式時需要用到
import monitorIndex from 'page/monitor/index'; // 該組件為一個監(jiān)控頁面诱建，用于顯示在 page/index.vue 頁面上的 router-view 處（即頁面的內(nèi)容區(qū)域）
Vue.use(Router);
// 定義 scrollBehavior 方法
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
export default new Router({
mode: 'history',
// mode 默認 hash 值，但是 hash （url中包含 # 符號）不太好看也不符合我們一般的網(wǎng)址瀏覽習慣
// 當你使用 history 模式時碟绑，URL 就像正常的 URL俺猿，例如 http://yoursite.com/user/id，也好看格仲！
linkActiveClass: 'active',
// 默認值: 'router-link-active'押袍，就是當前組件被激活，相應路由會自動添加類 'router-link-active'凯肋，這里是為了全局設置激活類名谊惭，如果不設置，直接用默認的也是可以的
// 如：使用 router-link 組件來導航侮东，通過傳入 `to` 屬性指定鏈接
// <router-link to="/foo">Go to Foo</router-link>
// <router-link> 默認會被渲染成一個 `<a>` 標簽圈盔，'/foo' 路由下的組件顯示時，該 a 標簽上會自動添加類 'active'
scrollBehavior: scrollBehavior,
// 通過這個屬性（是個函數(shù)）悄雅，可以讓應用像瀏覽器的原生表現(xiàn)那樣药磺，在按下 后退/前進 按鈕時，簡單地讓頁面滾動到頂部或原來的位置煤伟，如果不設置癌佩，則組件切換時滾動條位置不變
routes: [
{
// 一級路由
path: '/',
component: index,
children: [
// 二級路由
// -----------默認首頁-------------
// 當 / 匹配成功，monitorIndex 會被渲染在 index 的 <router-view> 中
{ path: '', component: monitorIndex, alias: 'index.html' },
// 這里的 alias 'index.html' 為當前頁面的別名
// http://localhost:8080/index.html 等同于 http://localhost:8080/
// -----------監(jiān)控中心-------------
{
// 當 /monitor 匹配成功便锨，
// monitorIndex 會被渲染在 index 的 <router-view> 中
path: 'monitor',
name: '監(jiān)控中心',
component: monitorIndex
}
]
},
// 同一個路徑可以匹配多個路由围辙，此時，匹配的優(yōu)先級就按照路由的定義順序：誰先定義的放案，誰的優(yōu)先級就最高
// 因此下面的路由配置為備用姚建，如果某個路徑未被配置顯示相應的組件，則顯示 404 頁面
{ path: '*', component: notFoundComponent }
]
});
引入 router 配置：
// main.js
import Vue from 'vue';
// 引入 element ui 組件
import { Dropdown, DropdownMenu ...} from 'element-ui';
// 引入 App.vue
import App from './App';
// 引入 router 配置
import router from './router'; // 默認會找到 router 文件夾下的 index.js 文件
// 引入項目圖標的 sprite css吱殉，可以簡單的通過這種方式引入 css 文件
import './assets/css/sprite.css'
// 使用 element ui 組件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
...
new Vue({
el: '#app',
router, // 使用 router 配置
template: '<App/>',
components: { App },
});
04總結：
關于 vue-router 的使用掸冤，看文檔一般都能解決你的疑問，vue-router 2友雳。
其他參考文章：Vue.js系列之vue-router(中)（4）
PS：使用 history 模式的話稿湿，還需要 后臺配置 支持。因為我們的應用是個單頁客戶端應用押赊，如果后臺沒有正確的配置饺藤，當用戶在瀏覽器直接訪問http://oursite.com/user/id就會返回 404（因為的確找不到該頁面），這就不好看了。并且在后臺配置后涕俗，還需要前端來提供 404 頁面罗丰，我上面的示例代碼中有提到，可供參考再姑。
05. 測試接口
使用 Vue 開發(fā)單頁應用時萌抵，前后端分離開發(fā)，進度不一元镀。因此前端有時候就需要自己模擬接口的 json 文件绍填，然后直接使用異步請求方法（如 ajax） 去獲取數(shù)據(jù)，渲染頁面凹联，測試代碼等沐兰。
Step 1：
在 項目根目錄/static/api/ 目錄下新建一個 test.json 文件，寫入模擬的接口數(shù)據(jù)：
{
"status": true,
"data": {
...
}
}
Step 2：
在 .vue 組件文件里任意需要請求數(shù)據(jù)的方法里（如 created 鉤子蔽挠，或者某個 methods 方法里）編寫相關代碼：
let vm = this;
// ajax 請求數(shù)據(jù)
$.ajax({
type: 'GET',
url: 'static/api/test.json',
data: '',
beforeSend: function() {
// 顯示 Loading
vm.loading = true;
},
complete: function() {
// 隱藏 Loading
vm.loading = false;
},
success: function(data) {
// 處理返回數(shù)據(jù)
...
},
error: function() {
// 數(shù)據(jù)請求失敗住闯，給用戶適當?shù)姆答佇畔? ...
},
dataType: 'json'
});
05總結：
在后端尚未提供接口時，我都是用這個方法來測試前端獲取數(shù)據(jù)和處理數(shù)據(jù)的代碼是否正確澳淑。
3. 零碎問題
01. prop 傳值小技巧
我們可以為組件的 props 指定驗證規(guī)格比原。如果傳入的數(shù)據(jù)不符合規(guī)格，Vue 會發(fā)出警告杠巡。當組件給其他人使用時量窘，這很有用。
示例如下：
props: {
// 基礎類型檢測 （`null` 意思是任何類型都可以）
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字氢拥，有默認值
propD: {
type: Number,
default: 100
},
// 數(shù)組／對象的默認值應當由一個工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
愚蠢的我每次想要傳 Number 或者 Boolean 類型的值到子組件時蚌铜，都在父組件里定義好值，然后再綁定到子組件上：
// 這樣會報錯嫩海，因為 show type 為 Boolean冬殃，rows type 為 Number
// 默認情況下直接傳值，子組件接收到的都是 String 類型
// template
<child show="true" rows="6"></child>
// 于是我這樣做：
// template
<child :show="show" :rows="rows"></child>
// script
show: true,
rows: 6
// 實際上可以直接這樣做：
// template
<child :show="true" :rows="6"></child>
// 官網(wǎng)如是說：如果想傳遞一個實際的 number叁怪，需要使用 v-bind 审葬，從而讓它的值被當作 JavaScript 表達式計算。
小技巧：當某個 prop 類型為 Boolean 時奕谭，可以直接把該 prop 的名稱寫在組件上涣觉，默認會傳 true，不寫的話默認為 false血柳。比如
<child show :rows="6"></child>這么寫官册，子組件內(nèi)部就能收到 show 為 true。
02. autoprefixer
有些人會問如何在項目里使用
autoprefixer插件混驰，事實上使用vue-cli的webpack模板生成的項目里已經(jīng)帶有autoprefixer的使用了攀隔，如下圖：
03. build 時不生成 .map 文件
對項目進行
npm run build操作后皂贩，發(fā)現(xiàn)生成的文件超大（比想象中的大）栖榨，尤其是那些.map文件昆汹，不過，我們可以通過配置選擇不生成該類文件婴栽。
// 項目根目錄/config/index.js
var path = require('path')
module.exports = {
build: {
...
productionSourceMap: false, // 將該值設為 false满粗，就不會生成 .map 文件了
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
...
},
dev: {
...
}
}
4. 總結
一句話，有空多看文檔愚争，可以避免很多實踐中的問題映皆。
