vue組件詳解(五)——組件高級用法


一、遞歸組件

組件在它的模板內可以遞歸地調用自己, 只要給組件設置name 的選項就可以了。

示例如下:

        <div id="app19">
            <my-component19 :count="1"></my-component19>
        </div>
Vue.component('my-component19',{
    name: 'my-component19',  //其實當你利用 Vue.component 全局注冊了一個組件,全局的ID會被自動設置為組件的name。
    props: {
      count: {
          type: Number,
          default: 1
      }
    },
    template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>'
});

var app19 =  new Vue({
    el: '#app19'
});

渲染結果為:

    <div id="app19">
        <div>
            <div>
                <div><!----></div>
            </div>
        </div>
    </div>

 設置name 后,在組件模板內就可以遞歸使用了,不過需要注意的是,必須給一個條件來限制遞歸數量,否則會拋出錯誤: max stack size exceeded 。

組件遞歸使用可以用來開發一些具有未知層級關系的獨立組件,比如級聯選擇器和樹形控件等。

 

二、內聯模板

組件的模板一般都是在template 選項內定義的, Vue 提供了一個內聯模板的功能,在使用組件時,給組件標簽使用inline-template 特性,組件就會把它的內容當作模板,而不是把它當內容分發,這讓模板更靈活。

示例如下:

        <div id="app20">
            <my-component20 inline-template>
                <div>
                    <h3>在父組件中定義子組件的模板</h3>
                    <p>{{msg}}</p>
                </div>
            </my-component20>
        </div>
Vue.component('my-component20',{
    data: function(){
        return {
            msg: '在子組件聲明的數據'
        }
    }
});

var app20 =  new Vue({
    el: '#app20'
});

 

三、動態組件

Vue.js 提供了一個特殊的元素<component> 用來動態地掛載不同的組件, 使用is特性來選擇要掛載的組件。

示例如下:

        <div id="app21">
            <component :is="currentView"></component>
            <button @click="changeView('A')">切換到A</button>
            <button @click="changeView('B')">切換到B</button>
            <button @click="changeView('C')">切換到C</button>
        </div>
var app21 =  new Vue({
    el: '#app21',
    data: {
      currentView: 'comA'
    },
    methods: {
        changeView: function(data){
            this.currentView = 'com'+ data  //動態地改變currentView的值就可以動態掛載組件了。
        }
    },
    components: {
        comA: {
            template: '<div>組件A</div>'
        },
        comB: {
            template: '<div>組件B</div>'
        },
        comC: {
            template: '<div>組件C</div>'
        }
    }
});

 

 四、異步組件

當你的工程足夠大, 使用的組件足夠多時, 是時候考慮下性能問題了, 因為一開始把所有的組件都加載是沒必要的一筆開銷。

好在Vue.js 允許將組件定義為一個工廠函數,動態地解析組件。Vue. 只在組件需要渲染時觸發工廠函數, 並且把結果緩存起來,用於后面的再次渲染。

        <div id="app22">
            <my-component22></my-component22>
        </div>
Vue.component('my-component22',function(resolve, reject){
    window.setTimeout(function(){
        resolve({
            template: '<div>我是異步渲染的</div>'
        })
    },2000)
});

var app22 =  new Vue({
    el: '#app22'
});

工廠函數接收一個resolve 回調,在收到從服務器下載的組件定義時調用。也可以調用reject( reason )指示加載失敗。
這里setTimeout 只是為了演示異步,具體的下載邏輯可以自己決定,比如把組件配置寫成一個對象配置,通過Ajax 來請求,然后調用resolve 傳入配置選項。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM