vue入門教程之-插槽

歡迎關注博主公眾號「java大師」, 專注於分享Java領域乾貨文章, 關注回覆「資源」, 免費領取全網最熱的Java架構師學習PDF, 轉載請註明出處 https://www.javaman.cn/vue/vue-slot

上一節我們講了vue的元件，本節我們來講一下vue的另一個概念插槽

1、為什麼要用插槽？

< slot > 元素

Shadow DOM 使用 元素將不同的 DOM 樹組合在一起。Slot 是元件內部的佔位符，使用者可以使用自己的標記來填充。

通過定義一個或多個 slot，您可將外部標記引入到元件的 shadow DOM 中進行渲染。 這相當於您在說“在此處渲染使用者的標記”。

通俗點說：

slot是對元件的擴充套件，通過slot插槽向元件內部指定位置傳遞內容，通過slot可以父子傳參；是“佔坑”，在元件模板中佔好了位置，當使用該元件標籤時候，元件標籤裡面的內容就會自動填坑（替換元件模板中< slot >位置），當插槽也就是坑< slot name=”mySlot”>有命名時，元件標籤中使用屬性slot=”mySlot”的元素就會替換該對應位置內容；

2、插槽-slot

(1) html程式碼

下圖中定義了一個元件todo，todo中的template中用slot關鍵字定義了三個插槽title，content和category

每個插糟實際上也是一個component元件

<div id="app">
    <!--將title，content和category通過屬性與data資料進行繫結 -->
    <todo>
        <todo-title slot="title" :title="title"></todo-title>
        <todo-content slot="content" :content="content"></todo-content>
        <todo-category slot="category" v-for="category in categorys" :category="category"></todo-ategory>
    </todo>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //定義插槽的名字
        Vue.component('todo',{
            template:
                '<div>' +
                    '<slot name="title"></slot>'+
                    '<slot name="content"></slot>'+
                    '分類：'+
                    '<ul>' +
                        '<slot name="category"></slot>'+
                    '</ul>'+
                '</div>'
        })

        //定義todo-title元件，通過title屬性，將值傳給title
        Vue.component('todo-title',{
            props: ['title'],
            template:'<h3>標題：{{title}}</h3>'
        })
		//定義todo-content元件，通過content屬性，將值傳給content
        Vue.component('todo-content',{
            props: ['content'],
            template:'<p>內容：{{content}}</p>'
        })
		//定義todo-category，通過category屬性，將值傳給category
        Vue.component('todo-category',{
            props: ['category'],
            template:'<li>{{category}}</li>'
        })

        var vm = new Vue({
            el:"#app",
            data:{
                title:"java大師",
                content:"我愛java，我愛學習，我要成為富二代",
                categorys:["java","IT技術","大牛"]
            }
        });
    </script>
 

（2）執行結果如下圖：