Vue.js slot插槽的作用域插槽用法詳解

更新時間：2021年09月14日 10:29:31 作者：貓老板的豆

這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

沒有插槽的情況

<div id="app">
    <child>
        <span>1111</span>    
    </child>
</div>


<script>
    // 注冊子組件
    Vue.component("child", {
        template: "<div>這是一個div標簽</div>"
    });

    // 初始化父組件
    new Vue({
        el: "#app"
    });
</script>

模版里的 span標簽 會被替代成 “<div>這是一個div標簽</div>” 如下圖：

這里寫圖片描述

Vue2.x 插槽

有插槽的情況

簡單來說，使用 slot標簽 ，可以將<span>1111</span>，放到子組件中想讓他顯示的地方。如下圖：

<div id="app">
    <child>
        <span>1111</span>    
    </child>
</div>


<script>
    // 注冊子組件
    Vue.component("child", {
        template: "<div>這是<slot></slot>一個div標簽</div>"
    });

    // 初始化父組件
    new Vue({
        el: "#app"
    });
</script>

這里寫圖片描述

即使有多個標簽，會一起被插入，相當于用父組件放在子組件里的標簽，替換了<slot></slot>這個標簽。如下圖：

<div id="app">
    <child>
        <span>1111</span>   
        <i>2222</i>
        <b>3333</b>
    </child>
</div>


<script>
    // 注冊子組件
    Vue.component("child", {
        template: "<div>這是<slot></slot>一個div標簽</div>"
    });

    // 初始化父組件
    new Vue({
        el: "#app"
    });
</script>

這里寫圖片描述

具名插槽

父組件在要分發(fā)的標簽里添加 slot="xxx" 屬性
子組件在對應(yīng)分發(fā)的位置的 slot標簽 里，添加 name="xxx" 屬性
然后就會將對應(yīng)的標簽放在對應(yīng)的位置了。如下圖：

<div id="app">
    <child>
        <span slot="one">1111</span>
        <i slot="two">2222</i>
        <b slot="three">3333</b>
    </child>
</div>


<script>

    // 注冊子組件
    Vue.component("child", {
        template:   `<div>
                        這是
                        <slot name='one'></slot>
                        一個
                        <slot name='two'></slot>
                        div
                        <slot name='three'></slot>
                        標簽
                    </div>`
    });


    // 初始化父組件
    new Vue({
        el: "#app"
    });
</script>

這里寫圖片描述

沒有slot屬性

如果子組件標簽中沒有slot屬性，將會顯示默認的值

    <div id="app">
        <child>
            <!-- <span slot="one">1111</span> -->
            <i slot="two">2222</i>
            <!-- <b slot="three">3333</b> -->
        </child>
    </div>

    <script>
        // 注冊子組件
        Vue.component("child", {
            template:   `<div>
                            <slot name='one'>no one</slot>
                            <slot name='two'>no two</slot>
                            <slot name='three'>no three</slot>
                        </div>`

        });

        // 初始化父組件
        new Vue({
            el: "#app"
        });
    </script>

slot="two" 就被插到固定的位置上，如下圖：

這里寫圖片描述

插槽簡單實例應(yīng)用

想想你的電腦主板上的各種插槽，有插CPU的，有插顯卡的，有插內(nèi)存的，有插硬盤的，所以假設(shè)有個組件是computer，其模板是template ，如下：

<body>
    <div id="app">
        <computer>
            <div slot="CPU">Intel Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="Memory">Kingston 32G</div>
            <div slot="Hard-drive">Samsung SSD 1T</div>
        </computer>
    </div>

    <script>
        // 注冊子組件
        Vue.component("computer", {
            template:   `<div>
                            <slot name="CPU">這兒插你的CPU</slot>
                            <slot name="GPU">這兒插你的顯卡</slot>
                            <slot name="Memory">這兒插你的內(nèi)存</slot>
                            <slot name="Hard-drive">這兒插你的硬盤</slot>
                        </div>`
        });

        // 初始化父組件
        new Vue({
            el: "#app"
        });
    </script>
</body>

這里寫圖片描述

作用域插槽 ( 2.1.0 新增 )

作用域插槽是一種特殊類型的插槽，用作一個 (能被傳遞數(shù)據(jù)的) 可重用模板，來代替已經(jīng)渲染好的元素。

在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像你將 prop 傳遞給組件一樣
在父組件中，通過 slot-scope="scoped" 的形式，獲取子組件傳遞過來的數(shù)據(jù)，該數(shù)據(jù)對象的別名為 scoped。這就是作用域插槽的模板。

<div id="app">
    <child>
    	<!-- 2. 接收myName數(shù)據(jù)，scoped 為 { "myName": "貓老板的豆" } -->
        <template slot="content" slot-scope="scoped"> 
            <div>{{ scoped.myName }}</div>
        </template>
    </child>
</div>

<script>
	Vue.component('child', {
		data () {
			return {
				myName: '貓老板的豆'
			}
		},
		template: `<slot name="content" :myName="myName"></slot>`   // 1. 對外拋出 myName 數(shù)據(jù)
	})
	
	new Vue({
		el: "#app"
	});
</script>

Vue3.x 插槽

插槽

<!-- 父組件 -->
<template>
	<Child>
		<!-- Vue2.x寫法
		<div slot="parent">
            <div>父組件</div>
		</div>
		 -->
		<template v-slot:parent>
            <div>父組件</div>
        </template>
	</Child>
</template>


<!-- 子組件 -->
<template>
	<slot name='parent'>子組件</slot>
</template>

作用域插槽

在 Vue2.x 中具名插槽和作用域插槽分別使用 slot 和 slot-scope 來實現(xiàn)，在 Vue3.x 中將 slot 和 slot-scope進行了合并統(tǒng)一使用

父組件：

<template>
	<Child>
		<!-- <template slot="content" slot-scope="scoped">  -->
		<template v-slot:content="scoped">
			<div>{{scoped.myName}}</div>
		</template>
	</Child>
</template>

子組件：

<template>
	<slot name="content" :myName="myName"></slot>
</template>

<script>

import { ref } from 'vue'
export default {
	setup () {

		let myName = ref("貓老板的豆")

		return { myName }
	},
}
</script>

到此這篇關(guān)于Vue.js slot插槽的作用域插槽用法詳解的文章就介紹到這了,更多相關(guān)Vue.js slot插槽的作用域插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: