詳解Vue組件實(shí)現(xiàn)tips的總結(jié)
官網(wǎng)上已經(jīng)有的內(nèi)容，我就不再贅述了，直接在官網(wǎng)上查看即可，這里蚊子想換個(gè)角度來(lái)講解下vue的組件。
組件，顧名思義，就是把一個(gè)相對(duì)獨(dú)立，而且會(huì)多次使用的功能抽象出來(lái)，成為一個(gè)組件！如果我們要把某個(gè)功能抽象為一個(gè)組件時(shí)，要做到這個(gè)組件對(duì)其他人來(lái)說(shuō)是個(gè)黑盒子，他們不用關(guān)心里面是怎么實(shí)現(xiàn)的，只需要根據(jù)約定的接口調(diào)用即可！
我用一張圖稍微總結(jié)了下Vue中組件的構(gòu)成：
可以看到組件中包含的東西還是蠻多的，而且，還有很多的點(diǎn)沒有列出來(lái)，這里面的每一個(gè)知識(shí)點(diǎn)能都展開講很多。不過(guò)我們這里不講原理，只講使用。
我們以一個(gè)tips彈窗為例，來(lái)綜合運(yùn)用下組件的知識(shí)點(diǎn)。tips彈窗，幾乎所有的框架或者類庫(kù)，都會(huì)有彈窗這個(gè)組件，因?yàn)閺棿斑@個(gè)功能平時(shí)非常普遍，而且模塊解耦度高！
1. 接口約定
我們這里實(shí)現(xiàn)的彈窗，能用到的知識(shí)點(diǎn)有：props, event, slot, ref等。這里我們也能看到各個(gè)知識(shí)點(diǎn)是怎么運(yùn)用的。
/**
* modal 模態(tài)接口參數(shù)
* @param {string} modal.title 模態(tài)框標(biāo)題
* @param {string} modal.text 模態(tài)框內(nèi)容
* @param {boolean} modal.showbtn 是否顯示按鈕
* @param {string} modal.btnText 按鈕文字
*/
Vue.component('tips', {
props : ['tipsOptions'],
template : '#tips',
data(){
return{
show : false
}
},
computed:{
tips : {
get() {
let tips = this.tipsOptions || {};
tips = {
title: tips.title || '提示',
text: tips.text || '',
showbtn : tips.showbtn || true,
btnText : tips.btnText || '確定'
};
// console.log(tips);
return tips;
}
}
}
})
2. modal組件的實(shí)現(xiàn)
tips組件相對(duì)來(lái)說(shuō)實(shí)現(xiàn)的比較簡(jiǎn)單，僅用作提示用戶的簡(jiǎn)單彈層。
模板：
<div class="tips" v-show="show" transition="fade">
<div class="tips-close" @click="closeTips">x</div>
<div class="tips-header">
<slot name="header">
<p class="title">{{tips.title}}</p>
</slot>
</div>
<div class="tips-body">
<slot name="body">
<p class="notice">{{tips.text}}</p>
</slot>
</div>
<div class="tips-footer">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
</div>
</div>
模板中將結(jié)構(gòu)分成了三部分，標(biāo)題、內(nèi)容和操作區(qū)域。這里既可以使用props傳遞字符串，也可以使用slot進(jìn)行定制。
tips樣式：
.tips {
position: fixed;
left: 10px;
bottom: 10px;
z-index: 1001;
-webkit-overflow-scrolling: touch;
max-width: 690px;
width: 260px;
padding: 10px;
background: #fff;
box-shadow: 0 0 10px #888;
border-radius: 4px;
}
.tips-close{
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.tips-header{
text-align: center;
font-size: 25px;
}
組件內(nèi)的方法：
methods:{
closeTips(){
this.show = false;
},
yes : function(){
this.show = false;
this.$emit('yes', {name:'wenzi', age:36}); // 觸發(fā)yes事件
},
showTips(){
var self = this;
self.show = true;
setTimeout(function(){
// self.show = false;
}, 2000)
}
}
3. 調(diào)用tips組件
首先我們開始渲染組件：
<div class="app">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">顯示</a>
<tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
<h3 slot="header">提示標(biāo)題</h3>
<div slot="body">
<p>hello world</p>
<p>wenzi</p>
</div>
</tips>
</div>
點(diǎn)擊顯示按鈕后展示tips：
var app = new Vue({
el : '.app',
data : {
tipsOptions : {
title : 'tip'
}
}
methods:{
// 監(jiān)聽從組件內(nèi)傳遞出來(lái)的事件
yes(args){
// console.log( args );
alert( JSON.stringify(args) );
},
// 顯示tips
showtips(){
// console.log( this.$refs );
this.$refs.dialog.showTips();
}
}
})
4. 總結(jié)
在這個(gè)簡(jiǎn)單的tips組件里，我們實(shí)現(xiàn)了用props傳遞參數(shù)，用$emit向外傳遞參數(shù)，用slot插槽來(lái)定制內(nèi)容。
需要注意的是：組件props是單向綁定，即父組件的屬性發(fā)生變化時(shí)，子組件能接收到相應(yīng)的數(shù)據(jù)變化，但是反過(guò)來(lái)就會(huì)出錯(cuò)。即不能在子組件中修改props傳過(guò)來(lái)的數(shù)據(jù)，來(lái)達(dá)到修改父組件屬性的目的。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)。
另外，每次父組件更新時(shí)，子組件的所有 prop 都會(huì)更新為最新值。這意味著你不應(yīng)該在子組件內(nèi)部改變 prop。如果你這么做了，Vue 會(huì)在控制臺(tái)給出警告。如果真的需要在子組件里進(jìn)行修改，可以用這兩種方法應(yīng)對(duì)：
定義一個(gè)局部變量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定義一個(gè)計(jì)算屬性，處理 prop 的值并返回。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
當(dāng)然，這只是單頁(yè)面中組件的實(shí)現(xiàn)，更復(fù)雜的組件后續(xù)我們也會(huì)實(shí)現(xiàn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js 輸入框輸入值自動(dòng)過(guò)濾特殊字符替換中問標(biāo)點(diǎn)操作
這篇文章主要介紹了vue.js 輸入框輸入值自動(dòng)過(guò)濾特殊字符替換中問標(biāo)點(diǎn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
本文介紹了Vue的全局安裝過(guò)程、查看版本、安裝擴(kuò)展等步驟,并提供了解決在.vue文件目錄下運(yùn)行報(bào)錯(cuò)的方法,涉及到的錯(cuò)誤解決包括使用命令安裝@vue/compiler-sfc和執(zhí)行npm install命令安裝依賴2024-10-10
vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例
今天小編就為大家分享一篇vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能
這篇文章主要介紹了基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能,文中通過(guò)代碼示例給大家講解的非常纖細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
Vue 中如何將函數(shù)作為 props 傳遞給組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 中如何將函數(shù)作為 props 傳遞給組件的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這兩天學(xué)習(xí)了Vue.js 感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vuejs是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。今天給大家分享一篇教程關(guān)于Vue.js 60分鐘快速入門教程，一起看看吧2017-03-03
Vue實(shí)現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)
這篇文章主要介紹了基于Vue實(shí)現(xiàn)Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)模糊查詢,下面文章我們主要實(shí)現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫(kù)對(duì)應(yīng)內(nèi)容，實(shí)現(xiàn)模糊查詢，感興趣的小伙伴可以進(jìn)入文章我們一起學(xué)習(xí)2021-12-12
Vue3+Element-Plus?實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單時(shí)顯示不同內(nèi)容組件展示在Main區(qū)域功能
這篇文章主要介紹了Vue3+Element-Plus?實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單時(shí)顯示不同內(nèi)容組件展示在Main區(qū)域功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Vue如何實(shí)現(xiàn)簡(jiǎn)單的時(shí)間軸與時(shí)間進(jìn)度條
作為一個(gè)前端初學(xué)者,公司項(xiàng)目中前端需要一個(gè)進(jìn)度條,所以下面這篇文章主要給大家介紹了關(guān)于Vue如何實(shí)現(xiàn)簡(jiǎn)單的時(shí)間軸與時(shí)間進(jìn)度條的相關(guān)資料,需要的朋友可以參考下2022-09-09