2. 程式人生 > 程式設計 >淺談Vue中插槽slot的使用方法

淺談Vue中插槽slot的使用方法

阿新 • • 發佈：2021-11-25

如何定義和使用：

在元件的template中使用slot標籤定義,slot標籤中間可以定義預設顯示值，如果slot標籤沒有宣告name屬性值，在使用插槽時將預設從第一個插槽依次往下放置，為了方便使用，一般都會都插槽slot指定一個name屬性值，當要使用該插槽時，只需要在要使用的標籤內新增slot=‘插槽名字',就可以將指定的標籤放到指定的插槽內，插槽內可以是任意內容。

舉例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
 
 http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>slot插槽練習</title>

    <script src=oIeeJ"../..//.js"></script>

</head>

<body>

    <div id="app">

        <div style="border: 7px solid blueviolet;">

            <h2>父元件</h2>

            <cpn>

                <!-- 將一個元素新增到指定得插槽位置 -->

                <button slot="left">按鈕</button>

                <input type="text" slot="right" placeholder="這是輸入框..."></input>

            </cpn>

        </div>

    </div>

    <template lang="" id="cpn">

        <div style="border: 6px solid green;">

            <h2>子元件</h2>

            <!-- 在子元件中定義三個插槽，插槽內得值為預設值 -->

            <slot name="left">左</slot>

            <slot name="mediate">中</slot>

            <slot name="right">右&lhttp://www.cppcns.com
 
t;/slot>

        </div>

    </template>

    <script>

        new Vue({

            el:'#app',components:{

                cpn:{客棧

                    template:'#cpn',}

            }

        })

    </script>

</body>

</html>

效果如圖：

淺談Vue中插槽slot的使用方法

分析:

在上面例項中，子元件中定義了三個插槽，並給了具體的name屬性值，在父元件呼叫子元件中，子元件內給name為left的插槽位置放置了一個按鈕，將並將一個輸入框oIeeJ

放置到name為right的插槽。從中我們可以發現，通過使用插槽，可以使元件有更多的擴充套件，插槽內的內容可以是任意內容，定義插槽，相當於提前給元件挖好一個坑，等後面用到的時候再呼叫。


到此這篇關於 淺談Vue中插槽slot的使用方法的文章就介紹到這了,更多相關Vue中插槽slot用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

淺談Vue中插槽slot的使用方法

如何定義和使用： 在元件的template中使用slot標籤定義,slot標籤中間可以定義預設顯示值，如果slot標籤沒有宣告name屬性值，在使用插槽時將預設從第一個插槽依次往下放置，為了方便使用，一般都會都插槽slot指定一個

Vue中插槽slot的使用方法與應用場景詳析

什麼是插槽？ 我們知道在vue中 Child 元件的標籤 的中間是不可以包著什麼的 。

vue中插槽slot的使用

一、什麼是插槽 官方解釋：Vue 實現了一套內容分發的 API，將<slot>元素作為承載分發內容的出口。

對vue中插槽（slot）的理解

參考部落格 單個插槽 單個插槽是vue的官方叫法，也可以叫它預設插槽，或者與具名插槽相對，也可以成為匿名插槽，因為它不用設定name屬性

淺談VUE中的深拷貝與淺拷貝Object.assign()方法

Object.assign()方法 基本用法 Object.assign()方法用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target）。

淺談 Vue 中用於父子元件傳遞資料的方式：prop 和 slot

簡單介紹 開發可複用元件時，經常需要父子元件間相互傳遞資料。Vue 提供了 prop 和 slot 兩種特性用於處理不同的場景：

淺談VUE中演示v-for為什麼要加key

說到這個問題想必要舉個例子了 沒有key <div id=\"app\"> <div> <input type=\"text\" v-model=\"name\">

淺談keras中的batch_dot,dot方法和TensorFlow的matmul

概述 在使用keras中的keras.backend.batch_dot和tf.matmul實現功能其實是一樣的智慧矩陣乘法，比如A,B,C,D,E,F,G,H，I,J,K,L都是二維矩陣，中間點表示矩陣乘法，AG 表示矩陣A 和G 矩陣乘法（A 的列維度等於G 行維度）

淺談vue中document.getElementById()拿到的是原值的問題

問題 兩個介面都有id=\"test\"的div，內容不同，路由切換的時候document.getElementById()拿到的是原介面的值。

淺談vue中$bus的使用和涉及到的問題

Hello大家週末好，最近專案比較忙所以沒有及時的更新抱歉，今天給大家講一vue.bus。使用過的都知道$bus是兄弟之間相互傳值的專案中說實話用的地方不算多但是也會用到（每一個領域都是會有坑的呀）。

淺談vue中使用編輯器vue-quill-editor踩過的坑

結合vue+element-ui+vue-quill+editor二次封裝成元件 1.圖片上傳 分析原因 專案中使用vue-quill-editor富文字編輯器，在編輯內容的時候，我們往往會編輯圖片，而vue-quill-editor預設的處理方式是直接將圖片轉成base

淺談vue中get請求解決傳輸資料是陣列格式的問題

qs的stringify接收2個引數，第一個引數是需要序列化的物件，第二個引數是轉化格式,一般預設格式是給出明確的索引，如：arr[0]=1&arr[1]=2

淺談vue中$event理解和框架中在包含預設值外傳參

在vue中普通方法中預設帶有event DOM事件如greet方法，如果是行內函數的話如warn方法，只需要在定義方法的地方同時傳入$event即可，這裡需要強調的是在iview中，這裡用的是select元件，在其on-change事件中如果想要

淺談vue中resetFields()使用注意事項

this.$refs.frmAdd.resetFields();這句在使用中有些時候不會有啥問題，但有時候就會出問題，而且特別難纏，我原來這麼使用就沒問題啊，怎麼這裡就會有問題，查詢各種資料總結得出：

vue之插槽-slot

1.背景 2.slot簡單使用 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

淺談vue中index.html、main.js、App.vue、index.js之前的關係以及載入過程

引自：https://blog.csdn.net/qq_34182808/article/details/86690193 前序 承接上一遍“通過webpack構建vue專案”構建的專案檔案，簡單闡述一下當我們構建完成後，vue專案中的index.html、main.js、App.vue、index.

淺談Vue中計算屬性computed的實現原理

雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個專案實際經歷來看還是非常愉悅的，Vue文件清晰規範，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多場景使用Vue比React開發效率更

Vue中插槽指令

意義 就是在元件裡留著差值方便後續元件內容新增 而且由於外掛是寫在父級中資料可以直接父級中傳輸而不需要傳子再傳父有些情況會減少寫程式碼量

【Vue】插槽slot

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

淺談java中Object類的方法

目錄Java中Object類的方法registerNatives() : voidgetClass() : ClasshashCode() : inttoString() : Stringequals() : boolean== 和 equals的區別notify() : voidnotifyAll() : voidwait(long) : voidwait() : voi