8.Vue組件三---slot插槽

時間 2021-03-02

標籤 php html vue java python 編程 app dom 網站人工智能欄目 PHP 简体版

原文原文鏈接

主要內容: php

1. 什麼是插槽html

2. 組件的插槽vue

3. 插槽的使用方法java

4. 插槽的具名python

5. 變量的做用域編程

6. slot的做用域app

一. 什麼是插槽呢?

1. 生活中的插槽有哪些呢?

usb插槽, 插線板插槽dom

2. 插槽有什麼做用?

一樣的插線板, 能夠插電視機, 電冰箱, 洗衣機
電腦的usb接口, 能夠查鼠標, 插鍵盤, 還能夠外接移動硬盤
插槽的擴展性更強.網站

二. 組件的插槽

1. 做用: 讓組件的更加具備擴展性

例: 咱們一個網站有不少搜多功能. 每個頁面的搜索樣式,文案可能都不同.
搜索欄由背景底色, 左側文案, 搜索樣式, 右側搜索按鈕等幾部分組成
每個搜索欄的這幾個部分可能都不同, 這樣, 咱們就能夠將其定義爲一個組件, 而後, 將變化的部分定義爲插槽.
在不一樣的頁面, 咱們須要什麼樣的樣式就能夠往插槽中定義什麼樣內容人工智能

2. 如何封裝組件?

抽取共性, 保留不一樣.
將共性抽取到組件中, 而後不一樣的地方暴露爲插槽,一旦預留了插槽, 就能夠根據需求, 決定插槽的內容

三. 插槽的使用方法

1. 插槽的定義

在模板中使用<slot></slot>標籤訂義插槽
能夠給插槽設置一個默認值, 插槽裏能夠有多個值

2. 插槽的調用

咱們能夠在調用組件的時候, 在組建中直接定義內容

3. 插槽的基本使用方法　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <comp1><button>插槽裏放了一個按鈕</button></comp1>
    <br>
    <comp1><p>插槽裏放了一個p標籤</p></comp1>
    <br>
    <comp1>
            <span>插槽裏放了一個span標籤</span><span>, 又放了一個span標籤</span></comp1>
    <br>
    <comp1></comp1><br>

</div>
<template id="comp1">
    <div>
        <p>這是一個模板</p>
        <slot><button>這是插槽默認的按鈕</button></slot>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    Vue.component("comp1", {
        template: "#comp1"
    })

    const app = new Vue({ el: "#app", data: { message:"hello" } }) </script>
</body>
</html>

第一步: 定義了一個new Vue()模板

const app = new Vue({
        el: "#app",
        data: {
            message:"hello"
        }
    })

第二步: 定一個了一個組件. 並在組件中使用slot設置插槽. 這個插槽有一個默認值. 是一個button

<template id="comp1">
    <div>
        <p>這是一個模板</p>
        <slot><button>這是插槽默認的按鈕</button></slot>
    </div>
</template>

第三步: 調用組件, 並定製個性化插槽內容

<div id="app">
    <comp1><button>插槽裏放了一個按鈕</button></comp1>
    <br>
    <comp1><p>插槽裏放了一個p標籤</p></comp1>
    <br>
    <comp1>
            <span>插槽裏放了一個span標籤</span><span>, 又放了一個span標籤</span>
　　</comp1>
    <br>
    <comp1></comp1><br>

</div>

案例效果

四. 插槽的具名

若是有多個插槽, 想要分別替換每個插槽, 應該怎麼辦呢?

能夠分兩步:

第一步: 給插槽設置一個名字
第二步: 替換的時候指定插槽的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <comp1></comp1>
    <br> ---------------- <br>
    <comp1><p slot="second">替換第二個插槽的默認值</p></comp1>
    <br> -----------------<br>
    <comp1><p>不設置名字,將不會替換</p></comp1>
    <br> <br>

</div>
<template id="comp1">
    <div>
        <p>這是一個模板</p>
        <slot name="zero"><button>這是插槽默認的按鈕</button></slot> <br> <slot name="first"><span>第一個插槽</span></slot> <br> <slot name="second"><span>第二個插槽</span></slot> <br> <slot name="third"><span>第三個插槽</span></slot> <br>
    </div>

</template>
<script src="../../js/vue.js"></script>
<script>
    Vue.component("comp1", {
        template: "#comp1"
    })

    const app = new Vue({ el: "#app", data: { message:"hello" } }) </script>
</body>
</html>

第一步: 定義組件, 並設置四個插槽, 給每一個插槽定義一個名字

<template id="comp1">
    <div>
        <p>這是一個模板</p>
        <slot name="zero"><button>這是插槽默認的按鈕</button></slot> <br> <slot name="first"><span>第一個插槽</span></slot> <br> <slot name="second"><span>第二個插槽</span></slot> <br> <slot name="third"><span>第三個插槽</span></slot> <br>
    </div>

</template>

第二步: 調用組件, 指定替換插槽的內容

<comp1><p slot="second">替換第二個插槽的默認值</p></comp1>

五. 變量的做用域

1. 在vue實例中定義的data變量, 做用域都是vue實例
2. 在模板中定義的變量, 做用域是模板範圍內

看下面的案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>對象的做用域</p>
        <comp1 v-show="isShow"></comp1>
    </div>
    <template id="comp1">
        <div>
            <p>這是一個模板</p>
            <button v-show="isShow">按鈕</button>
        </div>
    </template>
    <script src="../../js/vue.js"></script>
    <script>
        const app = new Vue({ el: "#app", data: { message:"hello", name: "vue對象裏的name", isShow: true }, components: { comp1: { template: comp1, data() { return { "name": "模板裏的name",  isShow: false } } } } }) </script>
</body>
</html>

第一步: 定義了一個vue對象, 在父組件中定義一個變臉isShow爲true, 在子組件中定一個一個變量isShow:false.

const app = new Vue({
            el: "#app",
            data: {
                message:"hello",
                name: "vue對象裏的name",
                isShow: true
            },
            components: {
                comp1: {
                    template: comp1,
                    data() {
                        return {
                            "name": "模板裏的name",
                            isShow: false
                        }
                    }
                }
            }
        })

第二步: 在模板中使用isShow變量. 這裏使用的是模板中定義的isShow變量

    <template id="comp1">
        <div>
            <p>這是一個模板</p>
            <button v-show="isShow">按鈕</button>
        </div>
    </template>

第三步: 在dom元素中中使用isShow變量, 這裏的做用域是父組件

<div id="app">
        <p>對象的做用域</p>
        <comp1 v-show="isShow"></comp1>
    </div>

父組件的isShow是true, 因此, 會顯示子組件的內容. 子組件的isShow是false, 因此不會顯示button按鈕

效果和咱們預期的同樣.

總結:

父組件模板的全部東西都會在父級做用域內編譯; 子組件模板的全部東西都會在子級做用域內編譯
<comp1 v-show="isShow"></comp1>整個組件的使用過程是在父組件中出現的, 因此它的做用域是父組件

六. slot的做用域

首先, 咱們建立一個Vue實例, 而後在Vue的data中定義一個books, 在組件中定義一個books
而後, 在模板中定義一個插槽, 遍歷books. 咱們發現調用的是組件中的books

　　<template id="comp1">
        <slot>
            <div>
                <p>這是一個模板</p>
                <ul>
                    <li v-for="item in books">{{item}}</li>
                </ul>
            </div>
        </slot>
    </template>
    <script src="../../js/vue.js"></script>
    <script>
       
        const app = new Vue({
            el: "#app",
            data: {
                message:"hello",
                books:["book1", "book2", "book3", "book4", "book5"]
            },
            components: {
                comp1: {
                    template: comp1,
                    data() {
                        return {
                            books: ["go語言", "java編程實戰", "python人工智能", "php高階開發"]
                        }
                    }
                }
            }
        })
    </script>

直接調用模板

<div id="app">
        <p>slot的做用域</p>
        <br>---------------<br>
        <p>原模板展現</p>
        <comp1 ></comp1>
</div>

展現效果:

問題: 這時, 若是咱們想要換一種展現方式, 可是展現的數據仍是books. 怎麼辦呢?

也就是說, 咱們要替換全部的模板內容和樣式, 可是, 模板的數據仍是原來的數據.
方法是: 給slot定義一個name, 調用的時候指定slot爲name的名稱. 並設置當前模板的做用域

第一步: 給模板的插槽定義一個名字

　　<template id="comp1">
        <slot :data="books" name="showbooks">
            <div>
                <p>這是一個模板</p>
                <ul>
                    <li v-for="item in books">{{item}}</li>
                </ul>
            </div>
        </slot>
    </template>

第二步: 在替換組件內容的地方定義一個新的template. 指定替換的名字, 並設置做用於爲slot

　　　　<p>替換模板的內容: 按照 index - item展現, 並換顏色</p>
        <comp1>
            <template slot-scope="slot" slot="showbooks">
                <ul>
                    <li style="color: cornflowerblue" v-for="(item, index) in slot.data">{{index}} -- {{item}}</li>
                </ul>
            </template>
        </comp1>

在調用的時候, 使用slot.data做爲數據調用.

展現效果: