摘要：導語承接上文實戰(zhàn)之后臺管理系統開發(fā)一在上一篇文章中，我詳細敘述了如何創(chuàng)建項目框架和引入各種后臺常用插件，做好這些準備工作后，我們就可以著手進行頁面的開發(fā)了。如果傳入的數據不符合規(guī)格，會發(fā)出警告。

承接上文：Vue 2.x 實戰(zhàn)之后臺管理系統開發(fā)（一）

在上一篇文章中，我詳細敘述了如何創(chuàng)建項目框架和引入各種后臺常用插件，做好這些準備工作后，我們就可以著手進行頁面的開發(fā)了。在開發(fā)過程中，會遇到一些常見的需求和問題，我整理了一下，有以下幾點。

a. 父 -> 子（父組件傳遞數據給子組件）

使用 props，具體查看文檔 - 使用 Prop 傳遞數據（https://cn.vuejs.org/v2/guide...使用-Prop-傳遞數據）

b. 父 -> 子（在父組件上調用子組件內的方法）

使用 ref，具體查看文檔 - 子組件索引（https://cn.vuejs.org/v2/guide...子組件索引）

// 父組件 script
this.$refs.profile.someMethod();

注意：如果在子組件上設置 ref 屬性，則可以通過 this.$refs 獲取到該子組件對象，如果在普通的 html 標簽上設置 ref 屬性，則獲取到的是 Dom 節(jié)點。

c. 子 -> 父（在父組件上獲取子組件內的數據）

同上，也是利用 ref

// 父組件 script
let childData = this.$refs.profile.someData;

d. 子 -> 父（子組件內觸發(fā)事件，父組件監(jiān)聽事件）

父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件，具體查看文檔 - 使用 v-on 綁定自定義事件（https://cn.vuejs.org/v2/guide...使用-v-on-綁定自定義事件）

// 父組件 script
methods: {
    parentHandle(params){
        // 這個方法在子組件 emit childTrigger 事件后會執(zhí)行
        // params 為子組件里觸發(fā)事件時傳的參數
    }
}

// 子組件 user-profile script
this.$emit("childTrigger", params);

e. 子 -> 父（子組件傳值，父組件里使用，具體實現見 03）

01總結：

應用場景示例：在父組件上打開側邊欄子組件，可以傳 prop visible（true）來控制側邊欄打開；側邊欄內部有關閉按鈕，就在點擊關閉按鈕后觸發(fā)一個事件，父組件監(jiān)聽事件執(zhí)行方法將 data visible 改為 false。
PS：父組件傳值到子組件，傳的值是 Object 類型，子組件使用 v-model 可以修改該值（將某個表單元素的 v-model 設為該值），父組件可直接獲取到改變后的值。

有時候會用到一些工具類函數，希望可以全局調用，而不是局限于某個組件中。

Step 1：
在 項目根目錄/static/js/ 目錄下新建一個 util.js 文件，將常用的工具函數寫在這里面。

Step 2：
在 index.html 里面引入 util.js，就可以在 .vue 文件里使用那些方法了，如下：

02總結：

使用這個方法可以使得一些使用頻率高的函數可以在所有 .vue 文件中被調用，笨拙而又簡單。

以前看文檔時一直不理解如何使用 slot，現在用多了 elementui 的組件之后，就漸漸發(fā)現了它的實用性。

簡單來說，使用 slot 可以使我們做到：在父組件里使用子組件時，在子組件里插入一些自定義的內容（html 代碼啥的），具體查看文檔：http://cn.vuejs.org/v2/guide/...使用-Slot-分發(fā)內容；
更神奇的功能是 作用域插槽，可以讓我們在父組件里使用子組件時，獲取子組件傳來的數據，具體查看文檔：http://cn.vuejs.org/v2/guide/...作用域插槽。

簡單應用示例：

這里寫的東西會覆蓋子組件里的 slot 標簽所在的位置

渲染結果：

這里寫的東西會覆蓋子組件里的 slot 標簽所在的位置

可以應用簡單的 slot 來達到為不同的按鈕填充文字的目的：

詳情
搜索


詳情
搜索

作用域插槽示例：

在父級中，具有特殊屬性 scope 的