vue.js-使用插槽分發內容的三個示例

　　自己這段時間在自學vue.js，發現關於插槽這方面，官方文檔中，沒有詳細的講解使用方法與示例，我自己試着來總結了一下。然后根據官方文檔寫了幾個使用插槽的例子。每個例子都要引入vue.js。示例中上面為HTML代碼，下面為JavaScript代碼。

　　最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

一、單個插槽：

<div id="exp1">
    <my-com></my-com>
</div>

<script type="text/javascript">
    //單個插槽
    //子組件，備用內容在子組件的作用域內編譯，並且只有在宿主元素為空時，且沒有要插入的內容時才顯示備用內容
    Vue.component('child-com',{
        template:'<div><h2>我是子組件的標題</h2>' +
        '<slot>只有在沒有要分發的內容時才會顯示</slot>' +
        '</div>'
    });
    //父組件
    Vue.component('my-com',{
        template:'<div><h1>我是父組件的標題</h1>' +
        '<child-com>' +
        '<p>這是一些初始內容</p>' +
        '<p>這是另外一些初始內容</p>' +
        '</child-com>' +
        '</div>'
    });
    var exp1 = new Vue({
        el:'#exp1'
    })
</script>

 

二、具名插槽：

<div id="exp1">
    <parent-com></parent-com>
</div>

<script type="text/javascript">
    //子組件
    Vue.component('app-layout',{
        template:'' +
        '<div class="container">' +
        '   <header>' +
        '       <slot name="header"></slot>' +
        '   </header>' +
        '   <main>' +
        '       <slot></slot>' +
        '   </main>' +
        '   <footer>' +
        '       <slot name="footer"></slot>' +
        '   </footer>' +
        '</div>'
    });
    //父組件
    Vue.component('parent-com',{
        template:'' +
        '<app-layout>' +
        '   <h1 slot="header">這是一個頁面的標題</h1>' +
        '   <p>主要內容的一個段落</p>' +
        '   <p>主要內容的另外一個段落</p>' +
        '   <p slot="footer">這是一些頁腳信息</p>' +
        '</app-layout>'
    });
    var exp1 = new Vue({
        el:'#exp1'
    })
</script>

三、作用域插槽：

<div id="exp1">
    <parent-com></parent-com>
</div>

<script type="text/javascript">
    //子組件
    //代表性的列表組件模塊
    Vue.component('child-com',{
        template:'' +
        '<ul>' +
        '   <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' +
        '</ul>',
        data:function(){
            return {
                animal:[
                    {name:'大象'},
                    {name:'小狗'},
                    {name:'小貓'},
                    {name:'老虎'}
                ]
            }
        }
    });
    //父組件
    // 在父組件的模板里，使用一個Vue自帶的特殊組件<template> ，
    // 並在該組件上使用scope屬性，值是一個臨時的變量，存着的是由子組件傳過來的
    // prop對象，在下面的例子中我把他命名為props。
    //  獲得由子傳過來的prop對象。這時候，父組件就可以訪問子組件在自定義屬性上暴露的數據了。
    Vue.component('parent-com',{
        template:'' +
        '<div class="container">' +
        '<p>動物列表</p>' +
        '<child-com>' +
        '   <template scope="props" slot="child-ul">' +
        '       <li class="child-ul">{{ props.text }}</li>' +
        '   </template>' +
        '</child-com>' +
        '</div>'
    });
    //這個<div class="container"></div>是必須的，不然會發生編譯錯誤
    var exp1 = new Vue({
        el:'#exp1'
    })
</script>

 

這是我在學習官方文檔，然后在網絡上查找信息后，做的一些總結，歡迎指正。