溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue.js組件高級特性有哪些用法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
1 遞歸
為組件設置 name屬性，這個組件就可以在自身的模板內遞歸調用自己。
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}} 微信大變樣!看了這些新功能后，網友淡定不住了</p>\
<deniro-component\
:count="count + 1"\
v-if="count < 3"></deniro-component>\
</div>\
'
});
var app = new Vue({
el: '#app',
data: {}
});效果：
渲染結果：
可以利用組件的可遞歸特性，來實現一些具有不確定層級的組件，比如級聯選擇器和樹型組件。
2 內聯模板
一般情況下，組件的模板都是在 template 中定義的。我們也可以在組件標簽中加上 inline-template 屬性，這樣組件就會把它的內容作為實際的模板內容。
內聯模板可以接收父、子組件中聲明的數據，所以更加靈活。
html：
<div id="app2">
<deniro-component2 inline-template>
<div>
<h3>父組件中定義子組件模板</h3>
<p>{{content1}}</p>
<p>{{content2}}</p>
</div>
</deniro-component2>
</div>js：
Vue.component('deniro-component2',{
data:function () {
return {
content1:'雙屏手機一碰就碎？實測結果意外（來源于子組件）'
}
}
});
var app2 = new Vue({
el: '#app2',
data: {
content2:'AI正在改變所有行業 咖啡也將被消滅（來源于父組件）'
}
});渲染結果：
<div id="app2"> <div> <h3>父組件中定義子組件模板</h3> <p>雙屏手機一碰就碎？實測結果意外（來源于子組件）</p> <p>AI正在改變所有行業 咖啡也將被消滅（來源于父組件）</p> </div> </div>
如果父子組件定義的數據同名，那么優先使用子組件中的數據。
因為作用域較難理解，所以除非必要，否則不建議使用。
3 動態加載
我們可以使用 is 來實現動態掛載組件。
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>無人機送快遞 漸行漸近</p>'
}
var app4 = new Vue({
el: '#app4',
data: {
currentView: news
}
});渲染結果：
<div id="app4"> <p>無人機送快遞 漸行漸近</p> </div>
4 異步加載
當工程變得越來越大時，就需要考慮性能嘍。我們可以把組件定義成一個工廠函數，實現組件動態解析。Vue.js 會把本次渲染后的結果緩存起來，從而提高性能。
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 來模擬異步下載，下載成功后會調用 resolve 方法。
一般情況下，會把組件的配置定義為對象配置，然后通過 Ajax 請求組件配置信息，最后通過 resolve 傳入這些配置。
完整實例代碼：
<!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> <h3>父組件中定義子組件模板</h3> <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>無人機送快遞 漸行漸近</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: '雙屏手機一碰就碎？實測結果意外（來源于子組件）' } } }); var app2 = new Vue({ el: '#app2', data: { content2: 'AI正在改變所有行業 咖啡也將被消滅（來源于父組件）' } }); Vue.component('deniro-component', { name: 'deniro-component', props: { count: { type: Number, default: 1 } }, template: '\ <div class="child">\ <p>{{count}} 微信大變樣!看了這些新功能后，網友淡定不住了</p>\ <deniro-component\ :count="count + 1"\ v-if="count < 3"></deniro-component>\ </div>\ ' }); var app = new Vue({ el: '#app', data: {} }); </script> </body> </html>
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue.js組件高級特性有哪些用法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
