Vue.js組件高級特性實(shí)例詳解
更新時間：2018年12月24日 14:31:44 作者：deniro_li
這篇文章主要介紹了Vue.js組件高級特性,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Vue.js組件高級特性。分享給大家供大家參考，具體如下：
1 遞歸
為組件設(shè)置 name 屬性，這個組件就可以在自身的模板內(nèi)遞歸調(diào)用自己。
html：
<div id="app"> <deniro-component :count="1"></deniro-component> </div>
js：
Vue.component('deniro-component',{
name:'deniro-component',
props:{
count:{
type:Number,
default:1
}
},
template:'\
<div class="child">\
<p>{{count}} 微信大變樣!看了這些新功能后，網(wǎng)友淡定不住了</p>\
<deniro-component\
:count="count + 1"\
v-if="count < 3"></deniro-component>\
</div>\
'
});
var app = new Vue({
el: '#app',
data: {}
});
效果：
渲染結(jié)果：
可以利用組件的可遞歸特性，來實(shí)現(xiàn)一些具有不確定層級的組件，比如級聯(lián)選擇器和樹型組件。
2 內(nèi)聯(lián)模板
一般情況下，組件的模板都是在 template 中定義的。我們也可以在組件標(biāo)簽中加上 inline-template 屬性，這樣組件就會把它的內(nèi)容作為實(shí)際的模板內(nèi)容。
內(nèi)聯(lián)模板可以接收父、子組件中聲明的數(shù)據(jù)，所以更加靈活。
html：
<div id="app2">
<deniro-component2 inline-template>
<div>
<h2>父組件中定義子組件模板</h2>
<p>{{content1}}</p>
<p>{{content2}}</p>
</div>
</deniro-component2>
</div>
js：
Vue.component('deniro-component2',{
data:function () {
return {
content1:'雙屏手機(jī)一碰就碎？實(shí)測結(jié)果意外（來源于子組件）'
}
}
});
var app2 = new Vue({
el: '#app2',
data: {
content2:'AI正在改變所有行業(yè) 咖啡也將被消滅（來源于父組件）'
}
});
渲染結(jié)果：
<div id="app2"> <div> <h2>父組件中定義子組件模板</h2> <p>雙屏手機(jī)一碰就碎？實(shí)測結(jié)果意外（來源于子組件）</p> <p>AI正在改變所有行業(yè) 咖啡也將被消滅（來源于父組件）</p> </div> </div>
如果父子組件定義的數(shù)據(jù)同名，那么優(yōu)先使用子組件中的數(shù)據(jù)。
因?yàn)樽饔糜蜉^難理解，所以除非必要，否則不建議使用。
3 動態(tài)加載
我們可以使用 is 來實(shí)現(xiàn)動態(tài)掛載組件。
html：
<div id="app3">
<deniro-component3 :is="currentView"></deniro-component3>
<button @click="change('A')">切換到 A 組件</button>
<button @click="change('B')">切換到 B 組件</button>
<button @click="change('C')">切換到 C 組件</button>
</div>
js：
var app3 = new Vue({
el: '#app3',
components: {
componentA: {
template: '<div>組件 A</div>'
},
componentB: {
template: '<div>組件 B</div>'
},
componentC: {
template: '<div>組件 C</div>'
}
},
data: {
currentView: 'componentA'
},
methods: {
change: function (component) {
this.currentView = 'component' + component;
}
}
});
效果：
data 中的 is 變量也可以直接綁定組件對象。
html：
<div id="app4"> <deniro-component4 :is="currentView"></deniro-component4> </div>
js：
var news={
template:'<p>無人機(jī)送快遞 漸行漸近</p>'
}
var app4 = new Vue({
el: '#app4',
data: {
currentView: news
}
});
渲染結(jié)果：
<div id="app4"> <p>無人機(jī)送快遞 漸行漸近</p> </div>
4 異步加載
當(dāng)工程變得越來越大時，就需要考慮性能嘍。我們可以把組件定義成一個工廠函數(shù)，實(shí)現(xiàn)組件動態(tài)解析。Vue.js 會把本次渲染后的結(jié)果緩存起來，從而提高性能。
html：
<div id="app5"> <deniro-component5></deniro-component5> </div>
js：
Vue.component('deniro-component5', function (resolve,reject) {
window.setTimeout(function () {
resolve({
template:'<div>全球首個5G電話撥通</div>'
});
},1000);
});
var app5 = new Vue({
el: '#app5'
});
效果：
這里使用 setTimeout 來模擬異步下載，下載成功后會調(diào)用 resolve 方法。
一般情況下，會把組件的配置定義為對象配置，然后通過 Ajax 請求組件配置信息，最后通過 resolve 傳入這些配置。
完整實(shí)例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js組件高級特性</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
<deniro-component :count="1"></deniro-component>
</div>
<div id="app2">
<deniro-component2 inline-template>
<div>
<h2>父組件中定義子組件模板</h2>
<p>{{content1}}</p>
<p>{{content2}}</p>
</div>
</deniro-component2>
</div>
<div id="app3">
<deniro-component3 :is="currentView"></deniro-component3>
<button @click="change('A')">切換到 A 組件</button>
<button @click="change('B')">切換到 B 組件</button>
<button @click="change('C')">切換到 C 組件</button>
</div>
<div id="app4">
<deniro-component4 :is="currentView"></deniro-component4>
</div>
<div id="app5">
<deniro-component5></deniro-component5>
</div>
<script>
Vue.component('deniro-component5', function (resolve,reject) {
window.setTimeout(function () {
resolve({
template:'<div>全球首個5G電話撥通</div>'
});
},1000);
});
var app5 = new Vue({
el: '#app5'
});
var news={
template:'<p>無人機(jī)送快遞 漸行漸近</p>'
}
var app4 = new Vue({
el: '#app4',
data: {
currentView: news
}
});
var app3 = new Vue({
el: '#app3',
components: {
componentA: {
template: '<div>組件 A</div>'
},
componentB: {
template: '<div>組件 B</div>'
},
componentC: {
template: '<div>組件 C</div>'
}
},
data: {
currentView: 'componentA'
},
methods: {
change: function (component) {
this.currentView = 'component' + component;
}
}
});
Vue.component('deniro-component2', {
data: function () {
return {
content1: '雙屏手機(jī)一碰就碎？實(shí)測結(jié)果意外（來源于子組件）'
}
}
});
var app2 = new Vue({
el: '#app2',
data: {
content2: 'AI正在改變所有行業(yè) 咖啡也將被消滅（來源于父組件）'
}
});
Vue.component('deniro-component', {
name: 'deniro-component',
props: {
count: {
type: Number,
default: 1
}
},
template: '\
<div class="child">\
<p>{{count}} 微信大變樣!看了這些新功能后，網(wǎng)友淡定不住了</p>\
<deniro-component\
:count="count + 1"\
v-if="count < 3"></deniro-component>\
</div>\
'
});
var app = new Vue({
el: '#app',
data: {}
});
</script>
</body>
</html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運(yùn)行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了如何解決uni-app編譯后?vendor.js?文件過大的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
這篇文章主要介紹了關(guān)于vue-i18n在單文件js中的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
keep-alive是vue中的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,本文給大家介紹vue中的keep-alive詳解與應(yīng)用場景,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
本文分為html，js和css代碼給大家詳細(xì)介紹了vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版功能，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了基于vue-ssr服務(wù)端渲染入門詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在項(xiàng)目開發(fā)中經(jīng)常遇到各種報錯,每次總是通過這樣或那樣的辦法解決掉,這篇文章主要給大家介紹了關(guān)于如何處理vue項(xiàng)目中錯誤的相關(guān)資料,需要的朋友可以參考下2022-06-06
Vue.js實(shí)現(xiàn)一個SPA登錄頁面的過程【推薦】
本篇文章主要介紹了Vue.js寫一個SPA登錄頁面過程的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
vue3中實(shí)現(xiàn)使用element-plus調(diào)用message
這篇文章主要介紹了vue3中實(shí)現(xiàn)使用element-plus調(diào)用message，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09