vue 中一些API 或屬性的常見用法

prop

官方解釋：prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候，它就變成了那個元件例項的乙個屬性。

通俗點講就是：prop是父元件用來傳遞資料的乙個自定義屬性。

vue.component('blog-post', )

乙個元件預設可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發現我們能夠在元件例項中訪問這個值，就像訪問data中的值一樣。

乙個 prop 被註冊之後，你就可以像這樣把資料作為乙個自定義特性傳遞進來：

<
blog-post 
title
="my journey with vue"
>
blog-post
>
<
blog-post 
title
="blogging with vue"
>
blog-post
>
<
blog-post 
title
="why vue is so fun"
>
blog-post
>

結果如下

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。（父傳子可以，子傳父不行）這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。

每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在乙個子元件內部改變 prop。如果你這樣做了，vue 會在瀏覽器的控制台中發出警告。（不能直接改props裡面的值，可以定義乙個屬性或者方法來接受props裡面的值後再操作）

官方舉例：

1.這個 prop 用來傳遞乙個初始值；這個子元件接下來希望將其作為乙個本地的 prop 資料來使用。在這種情況下，最好定義乙個本地的 data 屬性並將這個 prop 用作其初始值：

props: ['initialcounter'],
data: 
function
() }

2.這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義乙個計算屬性：

props: ['size'],
computed: 
}

案例：prop父元件向子元件傳值

父元件：

父元件:

子元件：

子元件:
}

$emit

子元件向父元件傳值：自定義事件，this.$emit。

子元件：

子元件:
}

父元件：

父元件:
}

以上講了父傳子，子傳父，那麼非父子元件直接如何傳值呢？

網上搜到了這樣乙個例子：vue事件匯流排（vue-bus）可實現非父子元件傳值

$ npm install vue-bus

如果在乙個模組化工程中使用它，必須要通過vue.use()明確地安裝 vue-bus：

import vue from 'vue';
import vuebus from 'vue-bus';
vue.use(vuebus);

如果使用全域性的 script 標籤，則無須如此（手動安裝）。

1.公共例項檔案bus.js，作為公共數控**匯流排

import vue from "vue";
export 
default
new vue();

2.在元件a中傳遞引數

import bus from '../bus.js';
export 
default
},methods:
}}

3.在元件b中接受引數

import bus from '../bus.js';
export 
default
},methods:
);    }
}}

這樣，就可以在第二個非父子關係的元件中，通過第三者bus.js來獲取到第乙個元件的value。

兄弟元件之間與父子元件之間的資料互動，兩者相比較，兄弟元件之間的通訊其實和子元件向父元件傳值有些類似，其實他們的通訊原理都是相同的，

例如子向父傳值也是$emit和$on的形式，只是沒有eventbus，但若我們仔細想想，此時父元件其實就充當了bus這個事件匯流排的角色。

這種用乙個vue例項來作為**事件匯流排來管理元件通訊的方法只適用於通訊需求簡單一點的專案，對於更複雜的情況，vue也有提供更複雜的狀態管理模式vuex來進行處理，請自行到官網進行學習。

import vuerouter from 'vue-router'import layout from 'components/layout'

//import layout_2 from 'components/layout1'

import headtopbar from 'components/head_top_bar'import headtopbar1 from 'components/head_top_bar1'import topbar1 from 'components/top_bar1'import topbar2 from 'components/top_bar2'import topbar3 from 'components/top_bar3'import topbar4 from 'components/top_bar4'import topbar5 from 'components/top_bar5'

////

登陸模組（按需載入,當渲染其他頁面時才載入其元件,並快取,減少首屏載入時間）

const login = resolve => require(['views/login'], resolve)

vue 中computed 和methods 在使用效果來看可以說是一樣的，但是深入看還是不一樣的。區別就在於： computed 依賴快取， methods 卻不是。怎麼理解呢？當dom每次需要渲染computed的值，這個值已經處於快取之中，不需要再重複的經歷一遍計算過程，只有當computed依賴的資料變數發生變化，這個計算屬性會自動更新，不需要渲染觸發。methods 的值被獲取的時候就會每次都會重新經歷一遍計算過程。

所以由此可以看出，computed和methods 的應用場景和計算過程的複雜程度有關，如果計算過程複雜龐雜，而且計算屬性會被經常呼叫（getter），那麼最好使用快取；如果，需要的值，計算簡單，呼叫不頻繁，實時性比較高（存在非同步請求）,會比較適合methods

computed有快取，若相關資料未發生變化，則不呼叫；

methods無快取，需要事件才能呼叫它（如點選等）；

watch多用於資料互動頻繁的內容。（例如定時axios從伺服器獲取資料）。

開源不易，望請star~

vue 中一些API 或屬性的常見用法

promise一些常見api

C 中一些常見的方法

中一些標籤的常見用法

vue 中一些API 或屬性的常見用法

promise一些常見api

C 中一些常見的方法

中一些標籤的常見用法

相關推薦