這次帶給大家實戰項目中如何使用vue組件，實戰項目中使用vue組件的注意事項有哪些，以下就是實戰案例，一起來看一下。
一、遞迴元件
元件在它的範本內可以遞歸地呼叫自己， 只要設定name 的選項給元件就可以了。
範例如下：
<p id="app19">
<my-component19 :count="1"></my-component19>
</p>
Vue.component('my-component19',{
name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
props: {
count: {
type: Number,
default: 1
}
},
template: '<p><my-component19 :count="count+1" v-if="count<3"></my-component19></p>'
});
var app19 = new Vue({
el: '#app19'
});渲染結果為：
<p id="app19"> <p> <p> <p><!----></p> </p> </p> </p>
設定name 後，在元件模板內就可以遞歸使用了，不過需要注意的是，必須給予一個條件來限制遞歸數量，否則會拋出錯誤： max stack size exceeded 。
元件遞歸使用可以用來開發一些具有未知層級關係的獨立元件，例如級聯選擇器和樹狀控制項等。
二、內嵌模板
元件的模板一般都是在template 選項內定義的， Vue 提供了一個內聯模板的功能，在使用組件時，給組件標籤使用inline-template 特性，組件就會把它的內容當作模板，而不是把它當內容分發，這讓模板更靈活。
範例如下：
<p id="app20">
<my-component20 inline-template>
<p>
<h3>在父组件中定义子组件的模板</h3>
<p>{{msg}}</p>
</p>
</my-component20>
</p>
Vue.component('my-component20',{
data: function(){
return {
msg: '在子组件声明的数据'
}
}
});
var app20 = new Vue({
el: '#app20'
});三、動態元件
##Vue.js 提供了一個特殊的元素＜component>用來動態地掛載不同的元件， 使用is特性來選擇要掛載的元件。 範例如下：<p id="app21">
<component :is="currentView"></component>
<button @click="changeView('A')">切换到A</button>
<button @click="changeView('B')">切换到B</button>
<button @click="changeView('C')">切换到C</button>
</p>
var app21 = new Vue({
el: '#app21',
data: {
currentView: 'comA'
},
methods: {
changeView: function(data){
this.currentView = 'com'+ data //动态地改变currentView的值就可以动态挂载组件了。
}
},
components: {
comA: {
template: '<p>组件A</p>'
},
comB: {
template: '<p>组件B</p>'
},
comC: {
template: '<p>组件C</p>'
}
}
});四、非同步元件
當你的工程夠大， 使用的元件夠多時， 是時候考慮下效能問題了， 因為一開始把所有的元件都載入是沒必要的一筆開銷。 好在Vue.js 允許將元件定義為一個工廠函數，動態地解析元件。 Vue. 只在元件需要渲染時觸發工廠函數， 並且把結果緩存起來，用於後面的再次渲染。 <p id="app22">
<my-component22></my-component22>
</p>
Vue.component('my-component22',function(resolve, reject){
window.setTimeout(function(){
resolve({
template: '<p>我是异步渲染的</p>'
})
},2000)
});
var app22 = new Vue({
el: '#app22'
});這裡setTimeout 只是為了示範非同步，具體的下載邏輯可以自己決定，例如把元件配置寫成一個物件配置，透過Ajax 來請求，然後呼叫resolve 傳入配置選項。
以上是實戰項目中如何使用vue組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
