實戰項目中如何使用vue組件

這次帶給大家實戰項目中如何使用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(&#39;A&#39;)">切换到A</button>
   <button @click="changeView(&#39;B&#39;)">切换到B</button>
   <button @click="changeView(&#39;C&#39;)">切换到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'
});

工廠函數接收一個resolve 回呼，在收到從伺服器下載的元件定義時呼叫。也可以呼叫reject( reason ）指示載入失敗。

這裡setTimeout 只是為了示範非同步，具體的下載邏輯可以自己決定，例如把元件配置寫成一個物件配置，透過Ajax 來請求，然後呼叫resolve 傳入配置選項。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue中有哪些循環遍歷指令

如何使用Angular資料綁定機制

以上是實戰項目中如何使用vue組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！