這篇文章將為大家詳細(xì)講解有關(guān)vue.js組件數(shù)據(jù)流的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
一、組件
組件，可以說是現(xiàn)代前端框架中必不可少的組成部分。使用組件，不僅能極大地提高代碼的復(fù)用率和開發(fā)者的開發(fā)效率，對于代碼后期的維護(hù)也有著非常重要的意義。前端開發(fā)，由于歷史遺留原因，WebComponent 雖然好用，但其發(fā)展情況卻受到極大地限制，和很多新興的前端技術(shù)一樣，可望而不可即。基于這樣的情況，聰明的開發(fā)者們嘗試通過框架內(nèi)部集成相應(yīng)的功能來完成組件化，各種現(xiàn)代前端框架基本上都有各自的實(shí)現(xiàn)。這里我們來分析一下 vue 的組件，重點(diǎn)關(guān)注數(shù)據(jù)的流向。
二、vue 組件
vue 的組件，創(chuàng)建模板的時(shí)候是基于普通的 html 的，不需要學(xué)習(xí) jsx、handlebars 等的特殊語法，所以相對來說，學(xué)習(xí)成本比較低，更容易上手。使用 vue 組件的時(shí)候，一般分為組件注冊和組件調(diào)用兩個(gè)部分。
（一）組件注冊
重慶分公司
重慶分公司
Vue.component('pop-box', {
template: '\
\
..........
利用 Vue.component 方法我們可以很輕松的創(chuàng)建一個(gè)全局可用的組件，當(dāng)然也可以在實(shí)例或組件內(nèi)部注冊局部組件，但原理大同小異。Vue.component 的第一個(gè)參數(shù)是組件的名字，或者說唯一標(biāo)識符（id），后續(xù)調(diào)用它將通過這個(gè)名字進(jìn)行調(diào)用；第二個(gè)參數(shù)是一個(gè)對象，通常它包含了模板（template）、組件內(nèi)維護(hù)的數(shù)據(jù)（data、computed）、方法（methods）、鉤子函數(shù)（created 、 mounted...）等關(guān)鍵信息。
值得注意的是：
組件內(nèi)的 data 必須是一個(gè)函數(shù)，它的返回值將作為實(shí)際的 “data”；
vue1.x 和 vue2.x 的鉤子函數(shù)略有不同，如果發(fā)現(xiàn)鉤子函數(shù)不生效，記得確認(rèn) vue 的版本。
（二）組件調(diào)用
（1）開始標(biāo)簽 + 結(jié)束標(biāo)簽?zāi)Ｊ?/p>
（2）無結(jié)束標(biāo)簽?zāi)Ｊ?/p>
調(diào)用 vue 組件有以上兩種模式。兩種模式上，如果沒有使用 slot 那么實(shí)際上并沒有任何區(qū)別，但如果需要使用 slot 的時(shí)候，便只能使用同時(shí)包含開始標(biāo)簽和結(jié)束標(biāo)簽的模式。
值得注意的是，上面綁定數(shù)據(jù)的時(shí)候，直接采用 property="value" 的形式，不管 value 是數(shù)字還是字符串，property 最終都是字符串類型。如果想讓其變成數(shù)字類型，請使用 v-bind:property="value" 的形式，或者簡寫為 :property="value" 。
三、vue 組件數(shù)據(jù)流
vue 遵循了典型的單向數(shù)據(jù)流的原則，即數(shù)據(jù)總是由父組件傳遞到子組件，子組件在其內(nèi)部可以有自己維護(hù)的數(shù)據(jù)，但它無權(quán)修改父組件傳遞給它的數(shù)據(jù)，當(dāng)開發(fā)者嘗試這樣做的時(shí)候，vue 將會報(bào)錯(cuò)。這樣做的好處是，防止多個(gè)子組件都嘗試修改父組件狀態(tài)時(shí)，讓這一行為變得難以追溯。vue 中具體實(shí)現(xiàn)方式如下：
父組件通過綁定 props 的方式，將數(shù)據(jù)傳遞給子組件，但是子組件自己并沒有權(quán)利修改這些數(shù)據(jù)，如果要修改，只能把修改這一個(gè)行為通過 event 的方式報(bào)告給父組件，由父組件本身決定改如何處理數(shù)據(jù)。
（一）簡單實(shí)例
