資訊專(zhuān)欄INFORMATION COLUMN
摘要：導(dǎo)語(yǔ)承接上文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)一在上一篇文章中，我詳細(xì)敘述了如何創(chuàng)建項(xiàng)目框架和引入各種后臺(tái)常用插件，做好這些準(zhǔn)備工作后，我們就可以著手進(jìn)行頁(yè)面的開(kāi)發(fā)了。如果傳入的數(shù)據(jù)不符合規(guī)格，會(huì)發(fā)出警告。
1. 導(dǎo)語(yǔ)
承接上文：Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)（一）
2. 常見(jiàn)需求 01. 父子組件通信在上一篇文章中，我詳細(xì)敘述了如何創(chuàng)建項(xiàng)目框架和引入各種后臺(tái)常用插件，做好這些準(zhǔn)備工作后，我們就可以著手進(jìn)行頁(yè)面的開(kāi)發(fā)了。在開(kāi)發(fā)過(guò)程中，會(huì)遇到一些常見(jiàn)的需求和問(wèn)題，我整理了一下，有以下幾點(diǎn)。
a. 父 -> 子（父組件傳遞數(shù)據(jù)給子組件）
使用 props，具體查看文檔 - 使用 Prop 傳遞數(shù)據(jù)（https://cn.vuejs.org/v2/guide...使用-Prop-傳遞數(shù)據(jù)）
b. 父 -> 子（在父組件上調(diào)用子組件內(nèi)的方法）
使用 ref，具體查看文檔 - 子組件索引（https://cn.vuejs.org/v2/guide...子組件索引）
// 父組件 script this.$refs.profile.someMethod();
注意：如果在子組件上設(shè)置 ref 屬性，則可以通過(guò) this.$refs 獲取到該子組件對(duì)象，如果在普通的 html 標(biāo)簽上設(shè)置 ref 屬性，則獲取到的是 Dom 節(jié)點(diǎn)。
c. 子 -> 父（在父組件上獲取子組件內(nèi)的數(shù)據(jù)）
同上，也是利用 ref
// 父組件 script let childData = this.$refs.profile.someData;
d. 子 -> 父（子組件內(nèi)觸發(fā)事件，父組件監(jiān)聽(tīng)事件）
父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件，具體查看文檔 - 使用 v-on 綁定自定義事件（https://cn.vuejs.org/v2/guide...使用-v-on-綁定自定義事件）
// 父組件 script
methods: {
parentHandle(params){
// 這個(gè)方法在子組件 emit childTrigger 事件后會(huì)執(zhí)行
// params 為子組件里觸發(fā)事件時(shí)傳的參數(shù)
}
}
// 子組件 user-profile script
this.$emit("childTrigger", params);
e. 子 -> 父（子組件傳值，父組件里使用，具體實(shí)現(xiàn)見(jiàn) 03）
01總結(jié)：
應(yīng)用場(chǎng)景示例：在父組件上打開(kāi)側(cè)邊欄子組件，可以傳 prop visible（true）來(lái)控制側(cè)邊欄打開(kāi)；側(cè)邊欄內(nèi)部有關(guān)閉按鈕，就在點(diǎn)擊關(guān)閉按鈕后觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)事件執(zhí)行方法將 data visible 改為 false。
PS：父組件傳值到子組件，傳的值是 Object 類(lèi)型，子組件使用 v-model 可以修改該值（將某個(gè)表單元素的 v-model 設(shè)為該值），父組件可直接獲取到改變后的值。
有時(shí)候會(huì)用到一些工具類(lèi)函數(shù)，希望可以全局調(diào)用，而不是局限于某個(gè)組件中。
Step 1：
在 項(xiàng)目根目錄/static/js/ 目錄下新建一個(gè) util.js 文件，將常用的工具函數(shù)寫(xiě)在這里面。
Step 2：
在 index.html 里面引入 util.js，就可以在 .vue 文件里使用那些方法了，如下：
02總結(jié)：
使用這個(gè)方法可以使得一些使用頻率高的函數(shù)可以在所有 .vue 文件中被調(diào)用，笨拙而又簡(jiǎn)單。
03. slot以前看文檔時(shí)一直不理解如何使用 slot，現(xiàn)在用多了 elementui 的組件之后，就漸漸發(fā)現(xiàn)了它的實(shí)用性。
簡(jiǎn)單來(lái)說(shuō)，使用 slot 可以使我們做到：在父組件里使用子組件時(shí)，在子組件里插入一些自定義的內(nèi)容（html 代碼啥的），具體查看文檔：http://cn.vuejs.org/v2/guide/...使用-Slot-分發(fā)內(nèi)容；
更神奇的功能是 作用域插槽，可以讓我們?cè)?strong>父組件里使用子組件時(shí)，獲取子組件傳來(lái)的數(shù)據(jù)，具體查看文檔：http://cn.vuejs.org/v2/guide/...作用域插槽。
簡(jiǎn)單應(yīng)用示例：
這里寫(xiě)的東西會(huì)覆蓋子組件里的 slot 標(biāo)簽所在的位置
渲染結(jié)果：
可以應(yīng)用簡(jiǎn)單的 slot 來(lái)達(dá)到為不同的按鈕填充文字的目的：
詳情 搜索
作用域插槽示例：
在父級(jí)中，具有特殊屬性 scope 的 元素，表示它是作用域插槽的模板。scope 的值對(duì)應(yīng)一個(gè)臨時(shí)變量名，此變量接收從子組件中傳遞的 prop 對(duì)象：
hello from parent {{ props.text }} {{ props.child }}
渲染結(jié)果：
hello from parent hello from child someChild
03總結(jié)：
應(yīng)用場(chǎng)景示例：elementui 的 button 組件中有簡(jiǎn)單插槽的使用，table 組件則使用到了 作用域插槽。
04. router 使用小記默認(rèn)按鈕 主要按鈕 文字按鈕 @click.native.prevent="deleteRow(scope.$index)"> 移除
vue-router 的使用，簡(jiǎn)單來(lái)說(shuō)就是通過(guò)配置，實(shí)現(xiàn)在不同的 url 路徑下，頁(yè)面渲染不同的組件。具體查看文檔：vue-router 2。
使用示例
一級(jí)路由：
二級(jí)路由（路由可嵌套）：
...
router 配置：
// router/index.js
import Vue from "vue";
import Router from "vue-router";
// 引入組件
import index from "page/index"; // 該組件包含一個(gè)頂部欄和側(cè)邊菜單欄，內(nèi)容區(qū)使用 router-view 來(lái)根據(jù) url 路徑顯示子組件
import notFoundComponent from "page/404"; // 該組件為 404 頁(yè)面，當(dāng)你路由使用 history 模式時(shí)需要用到
import monitorIndex from "page/monitor/index"; // 該組件為一個(gè)監(jiān)控頁(yè)面，用于顯示在 page/index.vue 頁(yè)面上的 router-view 處（即頁(yè)面的內(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 默認(rèn) hash 值，但是 hash （url中包含 # 符號(hào)）不太好看也不符合我們一般的網(wǎng)址瀏覽習(xí)慣
// 當(dāng)你使用 history 模式時(shí)，URL 就像正常的 URL，例如 http://yoursite.com/user/id，也好看！
linkActiveClass: "active",
// 默認(rèn)值: "router-link-active"，就是當(dāng)前組件被激活，相應(yīng)路由會(huì)自動(dòng)添加類(lèi) "router-link-active"，這里是為了全局設(shè)置激活類(lèi)名，如果不設(shè)置，直接用默認(rèn)的也是可以的
// 如：使用 router-link 組件來(lái)導(dǎo)航，通過(guò)傳入 `to` 屬性指定鏈接
// Go to Foo
// 默認(rèn)會(huì)被渲染成一個(gè) `` 標(biāo)簽，"/foo" 路由下的組件顯示時(shí)，該 a 標(biāo)簽上會(huì)自動(dòng)添加類(lèi) "active"
scrollBehavior: scrollBehavior,
// 通過(guò)這個(gè)屬性（是個(gè)函數(shù)），可以讓?xiě)?yīng)用像瀏覽器的原生表現(xiàn)那樣，在按下 后退/前進(jìn) 按鈕時(shí)，簡(jiǎn)單地讓頁(yè)面滾動(dòng)到頂部或原來(lái)的位置，如果不設(shè)置，則組件切換時(shí)滾動(dòng)條位置不變
routes: [
{
// 一級(jí)路由
path: "/",
component: index,
children: [
// 二級(jí)路由
// -----------默認(rèn)首頁(yè)-------------
// 當(dāng) / 匹配成功，monitorIndex 會(huì)被渲染在 index 的 中
{ path: "", component: monitorIndex, alias: "index.html" },
// 這里的 alias "index.html" 為當(dāng)前頁(yè)面的別名
// http://localhost:8080/index.html 等同于 http://localhost:8080/
// -----------監(jiān)控中心-------------
{
// 當(dāng) /monitor 匹配成功，
// monitorIndex 會(huì)被渲染在 index 的 中
path: "monitor",
name: "監(jiān)控中心",
component: monitorIndex
}
]
},
// 同一個(gè)路徑可以匹配多個(gè)路由，此時(shí)，匹配的優(yōu)先級(jí)就按照路由的定義順序：誰(shuí)先定義的，誰(shuí)的優(yōu)先級(jí)就最高
// 因此下面的路由配置為備用，如果某個(gè)路徑未被配置顯示相應(yīng)的組件，則顯示 404 頁(yè)面
{ 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"; // 默認(rèn)會(huì)找到 router 文件夾下的 index.js 文件
// 引入項(xiàng)目圖標(biāo)的 sprite css，可以簡(jiǎn)單的通過(guò)這種方式引入 css 文件
import "./assets/css/sprite.css"
// 使用 element ui 組件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
...
new Vue({
el: "#app",
router, // 使用 router 配置
template: "
04總結(jié)：
關(guān)于 vue-router 的使用，看文檔一般都能解決你的疑問(wèn)，vue-router 2。
其他參考文章：Vue.js系列之vue-router(中)（4）
PS：使用 history 模式的話(huà)，還需要 后臺(tái)配置 支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶(hù)端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶(hù)在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404（因?yàn)榈拇_找不到該頁(yè)面），這就不好看了。并且在后臺(tái)配置后，還需要前端來(lái)提供 404 頁(yè)面，我上面的示例代碼中有提到，可供參考。
使用 Vue 開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)，前后端分離開(kāi)發(fā)，進(jìn)度不一。因此前端有時(shí)候就需要自己模擬接口的 json 文件，然后直接使用異步請(qǐng)求方法（如 ajax） 去獲取數(shù)據(jù)，渲染頁(yè)面，測(cè)試代碼等。
Step 1：
在 項(xiàng)目根目錄/static/api/ 目錄下新建一個(gè) test.json 文件，寫(xiě)入模擬的接口數(shù)據(jù)：
{
"status": true,
"data": {
...
}
}
Step 2：
在 .vue 組件文件里任意需要請(qǐng)求數(shù)據(jù)的方法里（如 created 鉤子，或者某個(gè) methods 方法里）編寫(xiě)相關(guān)代碼：
let vm = this;
// ajax 請(qǐng)求數(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) {
// 處理返回?cái)?shù)據(jù)
...
},
error: function() {
// 數(shù)據(jù)請(qǐng)求失敗，給用戶(hù)適當(dāng)?shù)姆答佇畔? ...
},
dataType: "json"
});
05總結(jié)：
在后端尚未提供接口時(shí)，我都是用這個(gè)方法來(lái)測(cè)試前端獲取數(shù)據(jù)和處理數(shù)據(jù)的代碼是否正確。
3. 零碎問(wèn)題 01. prop 傳值小技巧我們可以為組件的 props 指定驗(yàn)證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格，Vue 會(huì)發(fā)出警告。當(dāng)組件給其他人使用時(shí)，這很有用。
示例如下：
props: {
// 基礎(chǔ)類(lèi)型檢測(cè) （`null` 意思是任何類(lèi)型都可以）
propA: Number,
// 多種類(lèi)型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propD: {
type: Number,
default: 100
},
// 數(shù)組／對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: "hello" }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
愚蠢的我每次想要傳 Number 或者 Boolean 類(lèi)型的值到子組件時(shí)，都在父組件里定義好值，然后再綁定到子組件上：
// 這樣會(huì)報(bào)錯(cuò)，因?yàn)?show type 為 Boolean，rows type 為 Number // 默認(rèn)情況下直接傳值，子組件接收到的都是 String 類(lèi)型 // template
// 于是我這樣做： // template// script show: true, rows: 6
// 實(shí)際上可以直接這樣做： // template// 官網(wǎng)如是說(shuō)：如果想傳遞一個(gè)實(shí)際的 number，需要使用 v-bind ，從而讓它的值被當(dāng)作 JavaScript 表達(dá)式計(jì)算。
02. autoprefixer小技巧：當(dāng)某個(gè) prop 類(lèi)型為 Boolean 時(shí)，可以直接把該 prop 的名稱(chēng)寫(xiě)在組件上，默認(rèn)會(huì)傳 true，不寫(xiě)的話(huà)默認(rèn)為 false。比如
這么寫(xiě)，子組件內(nèi)部就能收到 show 為 true。
03. build 時(shí)不生成 .map 文件有些人會(huì)問(wèn)如何在項(xiàng)目里使用 autoprefixer 插件，事實(shí)上使用 vue-cli 的 webpack 模板生成的項(xiàng)目里已經(jīng)帶有 autoprefixer 的使用了，如下圖：
對(duì)項(xiàng)目進(jìn)行 npm run build 操作后，發(fā)現(xiàn)生成的文件超大（比想象中的大），尤其是那些 .map 文件，不過(guò)，我們可以通過(guò)配置選擇不生成該類(lèi)文件。
// 項(xiàng)目根目錄/config/index.js
var path = require("path")
module.exports = {
build: {
...
productionSourceMap: false, // 將該值設(shè)為 false，就不會(huì)生成 .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. 總結(jié)
一句話(huà)，有空多看文檔，可以避免很多實(shí)踐中的問(wèn)題。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83334.html
摘要：導(dǎo)語(yǔ)下文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)二該文章將從頭到尾梳理我是如何使用開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的，我會(huì)將自己遇到的問(wèn)題貼出，希望可以幫助到其他人。構(gòu)建項(xiàng)目框架準(zhǔn)備對(duì)于大陸用戶(hù)，建議將的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導(dǎo)語(yǔ) 下文：Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)（二） 該文章將從頭到尾梳理我是如何使用 Vue 2 開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的，我會(huì)將自己遇到的問(wèn)...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
閱讀 914·2021-09-29 09:35
閱讀 1259·2021-09-28 09:36
閱讀 1528·2021-09-24 10:38
閱讀 1078·2021-09-10 11:18
閱讀 638·2019-08-30 15:54
閱讀 2506·2019-08-30 13:22
閱讀 1972·2019-08-30 11:14
閱讀 706·2019-08-29 12:35
