【轉載】Vue 2.x 實戰之後臺管理系統開發（二）
2. 常見需求
01. 父子組件通信
a. 父 -> 子（父組件傳遞數據給子組件）
使用 props，具體查看文檔 - 使用 Prop 傳遞數據（cn.vuejs.org/v2/guide/co…
b. 父 -> 子（在父組件上調用子組件內的方法）
使用 ref，具體查看文檔 - 子組件索引（cn.vuejs.org/v2/guide/co…
<!--父組件 template--> <div id="parent"> <!--子組件--> <user-profile ref="profile"></user-profile> </div>// 父組件 script this.$refs.profile.someMethod();註意：如果在子組件上設置 ref 屬性，則可以通過 this.$refs 獲取到該子組件對象，如果在普通的 html 標簽上設置 ref 屬性，則獲取到的是 Dom 節點。
c. 子 -> 父（在父組件上獲取子組件內的數據）
同上，也是利用 ref
// 父組件 script let childData = this.$refs.profile.someData;
d. 子 -> 父（子組件內觸發事件，父組件監聽事件）
父組件可以在使用子組件的地方直接用
v-on來監聽子組件觸發的事件，具體查看文檔 - 使用 v-on 綁定自定義事件（cn.vuejs.org/v2/guide/co…<!--父組件 template--> <div id="parent"> <!--子組件--> <user-profile @childTrigger="parentHandle"></user-profile> </div>// 父組件 script methods: { parentHandle(params){ // 這個方法在子組件 emit childTrigger 事件後會執行 // params 為子組件裏觸發事件時傳的參數 } }// 子組件 user-profile script this.$emit(‘childTrigger‘, params);
e. 子 -> 父（子組件傳值，父組件裏使用，具體實現見 03）
01總結：
應用場景示例：在父組件上打開側邊欄子組件，可以傳 prop visible（true）來控制側邊欄打開；側邊欄內部有關閉按鈕，就在點擊關閉按鈕後觸發一個事件，父組件監聽事件執行方法將 data visible 改為false。
PS：父組件傳值到子組件，傳的值是Object類型，子組件使用v-model可以修改該值（將某個表單元素的v-model設為該值），父組件可直接獲取到改變後的值。
02. 全局函數
有時候會用到一些工具類函數，希望可以全局調用，而不是局限於某個組件中。
Step 1：
在 項目根目錄/static/js/ 目錄下新建一個 util.js 文件，將常用的工具函數寫在這裏面。
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總結：
使用這個方法可以使得一些使用頻率高的函數可以在所有.vue文件中被調用，笨拙而又簡單。
03. slot
以前看文檔時一直不理解如何使用 slot，現在用多了 elementui 的組件之後，就漸漸發現了它的實用性。
簡單來說，使用 slot 可以使我們做到：在父組件裏使用子組件時，在子組件裏插入一些自定義的內容（html 代碼啥的），具體查看文檔：cn.vuejs.org/v2/guide/co…
更神奇的功能是 作用域插槽，可以讓我們在父組件裏使用子組件時，獲取子組件傳來的數據，具體查看文檔：cn.vuejs.org/v2/guide/co…
簡單應用示例：
<!-- a-button 子組件 -->
<button type="button" class="a-button" @click="$emit(‘btn-click‘)"><slot></slot></button>
<!-- 這裏監聽了 button 的 click 事件，然後又觸發了 btn-click 事件 --><!-- 父組件 -->
<a-button @btn-click="handleClick">這裏寫的東西會覆蓋子組件裏的 slot 標簽所在的位置</a-button>
<!-- 這裏監聽了子元素觸發的 btn-click 事件，然後執行 handleClick 函數 -->渲染結果：
<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 的使用，簡單來說就是通過配置，實現在不同的 url 路徑下，頁面渲染不同的組件。具體查看文檔：vue-router 2。
使用示例
一級路由：
<!-- App.vue -->
<!-- 該組件為最高級父組件，使用 router-view 來根據路徑確定要顯示的子組件 -->
<template>
<div id="app">
<!-- router-view 位置用來顯示組件，如顯示下面的 index.vue -->
<router-view></router-view>
</div>
</template>二級路由（路由可嵌套）：
<!-- page/index.vue -->
<!-- 該組件包含一個頂部欄和側邊菜單欄，內容區使用 router-view 來根據 url 路徑顯示子組件 -->
<template>
<div class="index">
<!-- 頂部導航條 -->
<header class="main-header">
...
</header>
<!-- /頂部導航條 -->
<!-- 側邊導航欄 -->
<aside class="main-sidebar sidebar-gradient">
...
</aside>
<!-- /側邊導航欄 -->
<!-- 根據頁面一級菜單的點擊而進行切換的內容區 -->
<transition name="fade">
<!-- router-view 位置用來顯示組件 -->
<router-view></router-view>
</transition>
<!-- /內容區 -->
</div>
</template>router 配置：
// router/index.js
import Vue from ‘vue‘;
import Router from ‘vue-router‘;
// 引入組件
import index from ‘page/index‘; // 該組件包含一個頂部欄和側邊菜單欄，內容區使用 router-view 來根據 url 路徑顯示子組件
import notFoundComponent from ‘page/404‘; // 該組件為 404 頁面，當你路由使用 history 模式時需要用到
import monitorIndex from ‘page/monitor/index‘; // 該組件為一個監控頁面，用於顯示在 page/index.vue 頁面上的 router-view 處（即頁面的內容區域）
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中包含 # 符號）不太好看也不符合我們一般的網址瀏覽習慣
// 當你使用 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,
// 通過這個屬性（是個函數），可以讓應用像瀏覽器的原生表現那樣，在按下 後退/前進 按鈕時，簡單地讓頁面滾動到頂部或原來的位置，如果不設置，則組件切換時滾動條位置不變
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/
// -----------監控中心-------------
{
// 當 /monitor 匹配成功，
// monitorIndex 會被渲染在 index 的 <router-view> 中
path: ‘monitor‘,
name: ‘監控中心‘,
component: monitorIndex
}
]
},
// 同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高
// 因此下面的路由配置為備用，如果某個路徑未被配置顯示相應的組件，則顯示 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 開發單頁應用時，前後端分離開發，進度不一。因此前端有時候就需要自己模擬接口的 json 文件，然後直接使用異步請求方法（如 ajax） 去獲取數據，渲染頁面，測試代碼等。
Step 1：
在 項目根目錄/static/api/ 目錄下新建一個 test.json 文件，寫入模擬的接口數據：
{
"status": true,
"data": {
...
}
}Step 2：
在 .vue 組件文件裏任意需要請求數據的方法裏（如 created 鉤子，或者某個 methods 方法裏）編寫相關代碼：
let vm = this;
// ajax 請求數據
$.ajax({
type: ‘GET‘,
url: ‘static/api/test.json‘,
data: ‘‘,
beforeSend: function() {
// 顯示 Loading
vm.loading = true;
},
complete: function() {
// 隱藏 Loading
vm.loading = false;
},
success: function(data) {
// 處理返回數據
...
},
error: function() {
// 數據請求失敗，給用戶適當的反饋信息
...
},
dataType: ‘json‘
});05總結：
在後端尚未提供接口時，我都是用這個方法來測試前端獲取數據和處理數據的代碼是否正確。
3. 零碎問題
01. prop 傳值小技巧
我們可以為組件的 props 指定驗證規格。如果傳入的數據不符合規格，Vue 會發出警告。當組件給其他人使用時，這很有用。
示例如下：
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 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>
// 官網如是說：如果想傳遞一個實際的 number，需要使用 v-bind ，從而讓它的值被當作 JavaScript 表達式計算。小技巧：當某個 prop 類型為 Boolean 時，可以直接把該 prop 的名稱寫在組件上，默認會傳 true，不寫的話默認為 false。比如
<child show :rows="6"></child>這麽寫，子組件內部就能收到 show 為 true。
02. autoprefixer
有些人會問如何在項目裏使用
autoprefixer插件，事實上使用vue-cli的webpack模板生成的項目裏已經帶有autoprefixer的使用了，如下圖：
03. build 時不生成 .map 文件
對項目進行
npm run build操作後，發現生成的文件超大（比想象中的大），尤其是那些.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: {
...
}
}
原文鏈接：https://juejin.im/post/58f37bfe5c497d006c90ca28
【轉載】Vue 2.x 實戰之後臺管理系統開發（二）