官網上已經有的內容，我就不再贅述了，直接在官網上檢視即可，這裡蚊子想換個角度來講解下vue的元件。
元件，顧名思義，就是把乙個相對獨立，而且會多次使用的功能抽象出來，成為乙個元件！如果我們要把某個功能抽象為乙個元件時，要做到這個元件對其他人來說是個黑盒子，他們不用關心裡面是怎麼實現的，只需要根據約定的介面呼叫即可！
我用一張圖稍微總結了下vue中元件的構成：
可以看到元件中包含的東西還是蠻多的，而且，還有很多的點沒有列出來，這裡面的每乙個知識點能都展開講很多。不過我們這裡不講原理，只講使用。
我們以乙個tips彈窗為例，來綜合運用下元件的知識點。tips彈窗，幾乎所有的框架或者類庫，都會有彈窗這個元件，因為彈窗這個功能平時非常普遍，而且模組解耦度高！
1. 介面約定
我們這裡實現的彈窗，能用到的知識點有：props, event, slot, ref等。這裡我們也能看到各個知識點是怎麼運用的。
/*** modal 模態介面引數
* @param modal.title 模態框標題
* @param modal.text 模態框內容
* @param modal.showbtn 是否顯示按鈕
* @param modal.btntext 按鈕文字
*/ vue.component('tips',
},computed:;
tips = ;
// console.log(tips);
return tips;}}
}})2. modal元件的實現
tips元件相對來說實現的比較簡單，僅用作提示使用者的簡單彈層。
模板：程式設計客棧 x}}
j**ascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >}
模板中將結構分成了三部分，標題、內容和操作區域。這裡既可以使用props傳遞字串，也可以使用slot進行定製。
tips樣式：
.tips
.程式設計客棧tips-close
.tips-header
元件內的方法：
methods:,
yes : function()); // 觸發yes事件
},showtips(), 2000)
}}3. 呼叫tips元件
首先我們開始渲染元件：
j**ascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">顯示
hello world
wenzi
程式設計客棧t;
點選顯示按鈕後展示tips：
var app = new vue(
} methods:,
// 顯示tips
showtips()
}})4. 總結
在這個簡單的tips元件裡，我們實現了用props傳遞引數，用$emit向外傳遞引數，用slot插槽來定製內容。
需要注意的是：元件props是單向繫結，即父元件的屬性發生變化時，子元件能接收到相應的資料變化，但是反過來就會出錯。即不能在子元件中修改props傳過來的資料，來達到修改父元件屬性的目的。這是為了防止子元件無意修改了父元件的狀態。
另外，每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。如果你這麼做了，vue 會在控制台給出警告。如果真的需要在子元件裡進行修改，可以用這兩種方法應對：
定義乙個區域性變數，並用 prop 的值初始化它：
props: ['initialcounter'],
data: function ()
}定義乙個計算屬性，處理 prop 的值並返回。
props: ['size'],
computed:
}當然，這只是單頁面中元件的實現，更複雜的元件後續我們也會實現。
本文標題: 詳解vue元件實現tips的總結
本文位址:
Vue元件知識詳解
元件樹向元件傳遞資料 元件例項的生命週期 乙個完整的網頁是複雜的，如果將其作為乙個整體來進行開發，將會遇到下面的困難 vue推薦使用一種更加精細的控制方案 元件化開發 所謂元件化，即把乙個頁面中區域功能細分，每乙個區域成為乙個元件，每個元件包含 由於沒有構建工具的支撐，css 暫時無法放到元件中 元...
vue動態元件詳解
1 什麼是動態元件 動態元件是指 在乙個掛載點使用多個元件，並進行動態切換。可能對於新手來說，這句話有些難理解，什麼是掛載點?可以簡單的理解為頁面的乙個位置。最常見的就是 tab的切換功能。在vue要實現這個功能通常用兩種方式。一是使用元素的is的特性，二是使用v if。class hello 使用...
vue元件詳解 元件通訊
元件之間通訊可以用下圖表示 元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件需要向父元件傳遞資料時，就要用到自定義事件。子元件用 emit 來觸發事件，父元件用 on 來監昕子元件的事件。父元件可以直接在子元件的自定義標籤上使用v on 來監昕子元件觸發的自定義事件，...