vue如何將方法拋出

1. vue中的methods里調用了一個方法，為什麼拋異常了還能進入.then( )方法

可見registerMember返回的是一個promise，這種情況下，你要在then里檢查response，根據response是否正常來向用戶響應，而不是默認就是成功了。

2. vue文件裡面怎麼引用外部的js文件

• 步驟：

1. 首先。我們要改造我們要映入的外部js文件，改成下面這個格式。主要是紅色方塊內部代碼，我們需要將我們的模塊「拋出」，讓人能獲取到以下及相應代碼：

   

3. vue如何動態調用方法

通常我們會在組件里的 template 屬性定義模板，或者是在 *.vue 文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。
例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,

props: ['value','options']
})

如果此時需要增加一個 API 支持讓用戶自定義 option 部分的模板。此處用 slot 並不能解決問題。
通過 $options.template 修改
通過列印組件對象可以獲得一個信息，在 $options 里定義了一個 template 屬性，寫在 template 標簽里的模板，最終編譯後也會在 $options.template 里。通過文檔的生命周期 可以得知，在 created 的時候， 實例已經結束解析選項， 但是還沒有開始 DOM 編譯 也就是說，如果用戶通過 prop 的數據我們可以獲得，但是模板其實還沒有渲染成 DOM。經過測試，在 created 修改 this.$options.template 是可以改變最終生成的 DOM 的，同時也能拿到 props 的內容。
那麼我們可以修改下代碼，使其支持自定義模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],

created() {
varoptionTpl =this.template

this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})

用戶使用是就可以傳入模板了
<x-select
:value.sync="value"
template="<span>標簽: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>

可能存在的問題
我們知道 Vue 在內部幫我們做了許多優化，但是在這里可能會由於某些優化導致動態拼接的模板無法渲染成功。例如這里我們不使用 v-for 而是手工遍歷 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)

this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`

這里會導致一個 BUG，如果一個頁面有多個 x-select 組件，並且 options 長度不一樣，會導致長的 options 的組件後面幾個選項渲染不出來。究其原因是 Vue 會幫我們緩存模板編譯結果。翻看代碼可以找到 vue/src/instance/internal/lifecycle.js 里有做優化，同時提供的 _linkerCachable 本意是給 內聯模板 使用。我們可以通過設置 this.$options._linkerCachable = false 達到我們的目的。
這樣我們就可以開發讓用戶自定義布局的組件了，用戶傳入布局參數，通過手工拼接模板，設置了 _linkerCachable = false 也不會被緩存。
通過 $options.partials 動態添加 partial
使用 partials 也能達到添加自定義模板的目的，但是通常的做法是要全局注冊 partial，這么做並不優雅。 vue-strap 就是這么做的。如果重名了會被覆蓋（初次渲染不會，但是數據更新重新渲染 DOM 時就會被覆蓋）。
通過文檔我們知道可以在組件內部通過 partials 屬性注冊局部的 partial，因此自然而然也可以在 this.$options.partials 去動態添加了。

4. Vue實戰（六）通用Table組件

本文是 Vue實戰 系列的第六篇文章，主要介紹Falcon項目中通用 Table 組件的開發和使用 。Falcon項目地址： https://github.com/thierryxing/Falcon

隨著業務的發展和功能的增多，我們發現不少頁面都具備相似的功能，這里舉幾個比較俗的例子：可以多選的下拉菜單，帶輸入的對話框，日期選擇器等等，於是我們會想辦法將這些共有的功能抽取成一個個公共組件，以便能夠在不同的頁面或業務中使用。

對於一個中後台類的項目，一個比較常見的展示形式就是Table了，相信大家都不陌生，如下圖所示：

一個Table通常由如下幾個部分構成：

除此之外，由於 Table 中的數據往往都是從後端獲取的，所以這個包含 Table 的頁面還需要發起一個請求，並且將最終的內容渲染在表格之內，請求的過程由於是非同步的，所以需要給用戶展示一個 Loading 動畫；當請求數據為空時，需要顯示一個佔位的空元素控制項。

在 Falcon 項目的實踐中，我們發現，每一個頁面中的 Table 除了行數，列數，及單元格的內容不同之外，其它的地方，包括樣式，分頁及數據處理邏輯都是一樣的，每次新增一個這樣的頁面無非就是拷貝粘貼了，那麼在這種情況下，我們抽取出了一個通用的 Table 組件，取名為：TableBox。

說到這里插一個題外話：

關於這個問題我認為，如果一個功能只出現在了一個或兩個頁面中，往往是沒有必要處理的，因為一兩個功能的重復還不足以說明問題，也很難看出其中的共性，如果強行抽取的話，反而會增加維護的負擔；如果出現的地方超過了兩處，那麼我們就需要考慮將這個功能進行抽取了，我也常常和 Team 的人說：「如果一個功能你拷貝粘貼了1次，沒關系，不用糾結；2次的話，就得考慮其復用性和組件化了」。

當然，以上內容只適用於那些初期開發過程中無法預測未來變化的項目，如果剛開始產品設計的時候，就能夠充分的預見和考慮未來的業務發展，並且給出詳細的產品及UI設計方案，那麼就另當別論了。

回到我們的主題，抽取這個 TableBox 其實並不是一氣呵成的，而是在業務迭代中，不斷地發現新的場景，新的問題，帶著這些問題我們不斷的優化 TableBox，最終達到一個較為完整的狀態。這也符合 Vue 本身漸進式的理念。接下來我們花些時間，一起探討一下這些場景和問題：

我們發現，對於不同的頁面，只要帶有 Table 的，其數據都需要從遠端伺服器獲取，一般情況下，我們會在每個業務中都去寫一下這個網路獲取數據的邏輯，但是，如果仔細想想，你就會發現，其實這類列表數據獲取和處理的邏輯都是一樣的。所以針對這個情況，我們只要和後端協商好列表相關的統一 API 數據結構，如：

那麼數據獲取，渲染，Loading 動畫展示隱藏，分頁載入等操作都可以在 TableBox 中完成。
這個組件需要的只是向外暴露出數據請求的 API 地址及各種參數：

然後寫好對應的獲取數據的 fetchData 方法：

這樣對於調用者來說，只需要簡單的傳入相關 API 地址及參數就可以了，數據載入的事情讓 TableBox 去處理就好了，非常的方便。

因為 TableBox 組件本身是和業務無關的，所以其肯定無法知道我的這個 Table 的表頭是什麼，有多少行，也無法知道每一行展示什麼數據，這些內容全部應該由父組件告知 TableBox。

要實現以上的功能，我們可以藉助於 Vue 本身提供的強大的工具 Slot，如果簡單點說，大家可以把 Slot 理解為一個坑位，因為大多數情況下，組件自己無法預先知道某塊區域放置什麼內容，那麼組件可以先將個區域放置一個 Slot，就是挖個坑，當父組件引入子組件時，會告訴子組件往這個坑位中填充什麼樣的內容。

回到我們的 TableBox 組件，我們首先挖兩個坑（放置兩個 Slot ），命名為 ths 和 item ，分別用於表頭和行列表內容：

這樣對於表頭的數據，可以由引入 TableBox 的父組件來指定，用法如下，其中 slot='ths' 就是剛才我們在 TableBox
中放置的 Slot

同樣，對於每一行的內容，也是由引入 TableBox 的父組件來指定，用法如下：

在開發業務的過程中，遇到一個場景：當頁面數據已經全部載入完畢後，在某些場景下需要改變 Table 中某些數據的狀態（刪除某列或改變某一列的數據）。

這里具體舉個 Falcon 中的實際例子：
我們允許用戶給每個項目分配多個環境，以區分測試，生產，開發和各種自定義的場景，在每個環境下，用戶可以設置不同的 Git Branch 。用戶點擊 Choose Branch 按鈕後，會觸發一個請求到後端，變更當前環境的 Git Branch， 修改成功後該列表項的按鈕會顯示為 Current Branch 。

由於以上邏輯都是在引入了 TableBox 的父組件中完成的，其能夠控制數據的刷新，由於 場景1 中我們已經把數據請求的邏輯都封裝在了 TableBox 中，所以我們需要讓其向外暴露出一個 Boolean 屬性：reloadData，當此屬性為 true 時，TableBox 會重新請求一次API，並刷新列表。

同理，由於操作數據是由父組件發起的，所父組件中也需要有同樣的屬性，並且和 TableBox 中的 reloadData 保持數據同步，這里用到了 Vue 2.3 版本增加的一個 .sync 修飾符進行處理 。

這樣，當 reloadData 在數據更新完畢後還原為 false 狀態時，我們可以顯示的觸發一個 emit 事件：

由於目前所有的數據獲取都是在 TableBox 內部處理的，所以父組件本身是無法直接獲取到數據的。但是在某些情況下，我們又希望父組件能夠獲取到數據，以便能夠在頂層進行更靈活的處理，這時我們就需要在 TableBox 內部將數據拋出。

拋出的方式也很簡單，我們可以使用 emit 方法拋出一個事件。根據這個思路我們改造一下上文提到的 fetchData 方法：

然後在父組件中監聽這個事件，這樣就能獲取到完整的數據了。

解決了以上4個場景的問題後，我們這個 TableBox 可以說告一段落了，後續如果有遇到新的場景，新的問題，我們只需要不斷的去優化去完善這個組件即可。
到目前為止，TableBox 已經應用到了我們內部的三個後台項目約幾十個頁面中，可以說大大節省了我們的時間，提升了整體效率。
並且隨著這樣的組件越來越多，甚至我們的後端工程師經過簡短的培訓，也可以上手部分前端頁面的開發了。
最後附上 TableBox 的地址： https://github.com/thierryxing/Falcon/blob/mock/src/components/global/TableBox.vue

5. vue $emit 調用父組件非同步方法，執行完畢後再執行子組件的某方法，如何實現

//可以使用回調的方法

//父頁面
//父頁面調用組件的html中添加事件@test="test"
methods:{
test(data,cab){
setTimeout(()=>{
//這里使用定時器模擬執行完方法
console.log(data)//這是傳遞過來的參數用於處理
data++
cab(data)//將處理完成的數據返回回去
},2000)
}
}

//子頁面

this.$emit('tset',1,(res)=>{
console.log(res)//2秒後會執行這一句列印2

})
//我們也可以用Promise的方法代替回調
methods:{
test(data){
returnnewPromise((resolve)=>{
setTimeout(()=>{
//這里使用定時器模擬執行完方法
console.log(data)//這是傳遞過來的參數用於處理
data++
resolve(data)//將處理完成的數據返回回去
},2000)
})
}
}

//子頁面

constres=awaitthis.$emit('tset',1)
console.log(res)//2秒後會執行這一句

6. vue組件間通信

在父組件頁面使用 v-bind: 或 : 將數據傳遞給子組件，子組件通過 props 獲取父組件傳遞過來的值。

多級組件嵌套需要傳遞數據時，通常使用的方法是通過vuex。但如果僅僅是傳遞數據，而不做中間處理，使用 vuex 處理，未免有點大材小用。為此Vue2.4 版本提供了另一種方法---- $attrs ；

示例：
我們向子組件son傳遞5個屬性，再由子組件son向孫子組件grandson傳遞4個屬性（這4個組件不做任何處理，只是傳遞），son組件向grandson組件傳遞的那4個屬性就可以使用 v-bind=$attrs 。

通常和 $attrs 配合使用。

簡單來說，使用 interitAttrs: false 子組件的$attrs不會被當做是html屬性渲染到根元素上，防止修改html同名屬性。

在子組件頁面使用 this.$emit('自定義事件名', 數據); 將數據傳遞給父組件，父組件通過 @自定義事件名="事件處理方法名" 或者 v-on:自定義事件名="事件處理方法名" 獲取子組件傳遞過來的值。

若公共組件被很多組件調用且拋出的自定義事件都不同，此時就可以使用 $listeners ；根據父組件調用的事件去決定拋出哪個自定義事件。

EventBus 又稱為事件匯流排。在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會造成難以維護的災難，因此才需要更完善的Vuex作為狀態管理中心，將通知的概念上升到共享狀態層次。 更多EventBus

vuex官網

Vuex實現了一個單向數據流，在全局擁有一個State存放數據，當組件要更改State中的數據時，必須通過Mutation進行，Mutation同時提供了訂閱者模式供外部插件調用獲取State數據的更新。而當所有非同步操作(常見於調用後端介面非同步獲取更新數據)或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數據。最後，根據State的變化，渲染到視圖上。

provide / inject 官網介紹

vue2.2.0 新增API，這對選項需要一起使用， 以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在其上下游關系成立的時間里始終生效 。如果你熟悉 React，這與 React 的上下文特性很相似。
provide / inject API 主要解決了跨級組件間的通信問題。 官網提供了很詳細的介紹，這里直接上圖

由圖8-1可知， this.$children 獲取到的是一個vue實列數組

由圖8-2可知， this.$parent 獲取到的是直接父實例

由圖8-3可知， this.$refs 返回的是一個使用ref注冊過的對象

sessionStorage、localStorage也能實現通信，但是需要監聽storage的變化，如何監聽storage的變化，之前有寫過這篇文章 vue 監聽localStorage、sessionStorage變化 ，這里就不贅述了。

vue組件間通信的六種方式

7. vue 使用組件時，怎麼調用實例私有的方法

vue組件的數據傳遞應該是單向，永遠是向下的，把父組件屬性方法傳遞到子組件。 如果子組件要改變不同的顏色，是應該接受父組件傳遞進來的props，自己調用自己的方法，把props當個參數來判斷來顯示什麼顏色，而不是讓父元素調子組件的方法。 還有一種是vuex，組件本身跟store的某個值綁定，外部組件修改store的值，來影響該組件的顏色

8. 怎麼將vue中method中的方法設置為公有，各個vue界面都可以調用

• 下面開始介紹下，在頁面載入一個數據列表完成之後，頁面自動滾動定位到中間某個列表元素，需要在列表數據渲染完成，計算列表高度，再控制定位到指定行。首先介紹下一開始嘗試沒有生效的方案，這也是大家最容易出現錯誤的地方，vue.js提供的mounted函數，表示掛載到實例上去之後調用該鉤子

  

• 7

  最後說明下，有時候我們會想到使用setTimeout的方式來實現，使用這種方式需要設置個超時執行時間，由於渲染時間無法確定，有快有慢，就會出現不穩定的現象。

注意事項

• 使用watch可能會因為監控的對象發生多次變化，而觸發多次初始化函數

• 以上只是我測試時找到的方法，不一定是最好的實現方式，只做參考

9. vue.js怎麼傳遞參數 emit on

//emit是用來拋出事件（方法）的，如：
this.$emit('eventName',params);//eventName:事件名params：參數，多個時使用，號隔開
//on是用來監控emit拋出的事件（方法）的，如：
this.$on('eventClick',params)
methods:{
eventClick:function(params){
}
}
//大概就是這樣子，希望能幫到你~