2. 程式人生 > 程式設計 >vue 插槽簡介及使用示例

vue 插槽簡介及使用示例

阿新 • • 發佈：2020-11-19

Vue的插槽，是一種內容分發機制，但是我感覺它更加像元件的一種佔位符的概念，通過插槽，等待元件外部傳入複雜的內容。

使用插槽的好處

在以前的例子中todo-item插槽直接寫在了todo-list插槽中，其實是比較不合理的，它會導致todo-list插槽比較死板，無法重用更多的其他元件。

 Vue.component("todo-list",{
    template: `
        <ul>
          <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
        </ul>
      `,data: function() {
     return {
      
     };
    },methods:{
      
    }
   });

通過插槽化改造，則可以允許使用todo-list元件的使用者自行的傳入想要使用的todo-item，而不是一個固定的內容。

插槽改造過程

改造示例：

  • 將todo-item元件從todo-list元件中移除，放到頁面的html程式碼中。
  • 將todo-list元件中原todo-item的位置修改為
  • 因為todo-item移到了頁面html程式碼中，所以需要將todo-list的data中的list，移回全域性vue中，防止元件找不到list導致v-for報錯；handleDelete同理也要移至全域性vue中
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
    </todo-list>
  </div>

  <script>
   Vue.component("todo-list",{
    template: `
        <ul>
          <slot></slot>
        </ul>
      `,methods:{
      
    }
   });
   Vue.component("todo-item",{
    props: {
     title: String,del: {
      type: Boolean,default: false
     }
    },template: `
       <li>
         <span v-if="!del">{{title}}</span>
         <span v-else style="text-decoration:line-through">{{title}}</span>
         <button v-show="!del" @click="handleClick">刪除</button>
       </li>`,data: function() {
     return {};
    },methods: {
      handleClick(){
        console.log("點選刪除按鈕！");
        this.$emit('delete',this.title);
      }
    }
   });
   var vm = new Vue({
    el: "#app",data: {
      list: [
       {
        title: "新課程1",del: false
       },{
        title: "新課程2",del: true
       },{
        title: "新課程3",del: false
       }
      ]
    },methods: {
      handleDelete(vtitle){
        console.log("刪除工程！",vtitle)
      }
    }
   });
  </script>
 </body>
</html>

效果和改造前是一模一樣的。

插槽的種類

處理預設插槽外，還有具名插槽，作用域插槽等等。

所謂的具名插槽就是指帶有名稱的插槽，解決的是一個元件中存在多個插槽的業務場景。比如有一個母版頁元件，希望區分頁頭，頁尾和頁面主體。實現如下效果：

<div class="container">
 <header>
  <!-- 我們希望把頁頭放這裡 -->
 </header>
 <main>
  <!-- 我們希望把主要內容放這裡 -->
 </main>
 <footer>
  <!-- 我們希望把頁尾放這裡 -->
 </footer>
</div>

那麼這個元件應該這樣編寫

<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot>
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>

具體呼叫元件的位置，則有兩種寫法：

一種是2.6之前的寫法。

<元件名>
<p slot="header">頭部段落</p>
<p>主段落</p>
<p slot="footer">尾部段落</p>
</元件名>

一種是2.6之後的寫法

<元件名>
<template v-slot:header>
  <p>頭部段落</p>
</template>
<p>主段落</p>
<template v-slot:footer>
  <label>尾部段落</label>
</template>
</元件名>

按照2.6之後的寫法，我們嘗試將todo-item元件中增加一個前置lable和後置lable

  • 在todo-item元件的template中的html中增加slot插槽，並標記名稱
  • html頁面的元件呼叫位置，使用template和v-slot的語法插入內容
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext>
          <label>前置文字</label>
        </template>
        <template v-slot:suftext>
          <label>後置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

  <script>
   Vue.component("todo-list",template: `
       <li>
         <slot name="pretext"></slot>
         <span v-if="!del">{{title}}</span>
         <span v-else style="text-decoration:line-through">{{title}}</span>
         <button v-show="!del" @click="handleClick">刪除</button>
         <slot name="suftext"></slot>
       </li>`,vtitle)
      }
    }
   });
  </script>
 </body>
</html>

作用域插槽：作用域插槽可以接收子元件傳遞的值，並根據不同的值顯示不同的內容。如根據使用者根據返回的值控制樣式資訊。

作用域插槽示例：

  • 為todo-item的data屬性增加返回值vRandom
data: function() {
  return {
    vrandom:Math.random()
  };
},
  • 在todo-item的template的html中通過v-bind繫結元件中的屬性。
template: `
  <li>
    <slot name="pretext" :val="vrandom"></slot>
    <span v-if="!del">{{title}}</span>
    <span v-else style="text-decoration:line-through">{{title}}</span>
    <button v-show="!del" @click="handleClick">刪除</button>
    <slot name="suftext"></slot>
  </li>`,
  • 在使用元件時通過模板語法呼叫繫結的變數
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
          <label>後置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

全部html程式碼為

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
          <label>後置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

  <script>
   Vue.component("todo-list",template: `
       <li>
         <slot name="pretext" :val="vrandom"></slot>
         <span v-if="!del">{{title}}</span>
         <span v-else style="text-decoration:line-through">{{title}}</span>
         <button v-show="!del" @click="handleClick">刪除</button>
         <slot name="suftext"></slot>
       </li>`,data: function() {
     return {
       vrandom:Math.random()
     };
    },vtitle)
      }
    }
   });
  </script>
 </body>
</html>

元件的插槽還有一種帶預設值的用法：在slot中增加預設內容

template: `
  <li>
    <slot name="pretext" :val="vrandom"></slot>
    <span v-if="!del">{{title}}</span>
    <span v-else style="text-decoration:line-through">{{title}}</span>
    <button v-show="!del" @click="handleClick">刪除</button>
    <slot name="suftext">預設尾部</slot>
  </li>`,

如果呼叫元件時沒有在插槽位置插入內容，則html展示以預設內容進行填充，如果有插內容則以插入值填充。

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
          <label>後置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

效果

vue 插槽簡介及使用示例

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
        </template>
      </todo-item>
    </todo-list>
  </div>

或者

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

vue 插槽簡介及使用示例

以上就是vue 插槽簡介及使用示例的詳細內容，更多關於vue 插槽的資料請關注我們其它相關文章！

相關推薦

vue 插槽簡介及使用示例

Vue的插槽，是一種內容分發機制，但是我感覺它更加像元件的一種佔位符的概念，通過插槽，等待元件外部傳入複雜的內容。

vue框架之元件通訊及插槽簡介等相關內容-113

1 定義區域性元件 2 元件編寫方式與Vue例項的區別 1 自定義元件需要有一個root element，一般包裹在一個div中,跟vue例項一樣2 父子元件的data是無法共享3 元件可以有data，methods,computed....,但是data 必須是一個

04 . Vue元件註冊,資料互動,除錯工具及元件插槽介紹及使用

vue元件 元件（Component）是 Vue.js 最強大的功能之一。 元件可以擴充套件 HTML 元素，封裝可重用的程式碼。

04 . Vue元件註冊,元件間資料互動,除錯工具及元件插槽介紹及使用

vue元件 元件（Component）是 Vue.js 最強大的功能之一。 元件可以擴充套件 HTML 元素，封裝可重用的程式碼。

vue插槽的理解和使用及作用域插槽

技術標籤：前端vue 什麼是插槽？ 插槽就是子元件中的提供給父元件使用的一個佔位符，用<slot></slot> 表示，父元件可以在這個佔位符中填充任何模板程式碼，如 HTML、元件等，填充的內容會替換子元件

vue中插槽整理及用法分析

本教程操作環境：windows7系統、2.9.6版，DELL G3電腦。 vue的插槽（slot）主要分三種：

vue插槽slot的簡單理解與用法例項分析

本文例項講述了vue插槽slot的簡單理解與用法。分享給大家供大家參考，具體如下：

vue 插槽slot的使用

官網：https://cn.vuejs.org/v2/guide/components-slots.html 理解this.$emit自定義事件分發 案例

Vue 插槽

插槽的型別 預設插槽 default 具名插槽 name 作用域插槽 v-slot 預設插槽的使用 在自定義元件中使用<slot />標籤進行佔位，當我們使用該元件時，在元件標籤內寫入需要展示的具體內容：

vue - 插槽詳解

目錄什麼是插槽預設插槽具名插槽作用域插槽獨佔預設插槽動態插槽名具名插槽的縮寫

vue插槽

具名和作用域插槽基礎示範： //父元件 <myslot> <templatev-slot:name1> <p>這是一個具名插槽內容1</p>

Vue插槽_特殊特性slot,slot-scope與指令v-slot說明

1、slot作用/概念：預先將將來要使用的內容進行保留； 2、具名插槽：給slot起個名字

vue插槽的學習

看著官方文件和例項跟著菜鳥的思路一起學習一下吧 1.插槽內容 比如說你有這樣一個父元件：

Vue插槽詳解

先看如下程式碼： //app.vue <template> <div> <Child>　　<span>小紅</span></Child>

vue-插槽

技術標籤：vuevue 1.插槽概念 插槽，也就是槽，是元件的一塊HTML模板，這塊模板顯示不顯示，以及怎樣顯示由父元件來決定。 實際上，一個時隙最核心的兩個問題在這裡就點出來了，的英文顯示不顯示狀語從句：怎樣顯

vue插槽slot用法

參考： https://blog.csdn.net/bobozai86/article/details/105473445 匿名插槽 子元件設定 <template>

Vue插槽與刪除按鈕

<div id=\"app\"> <todo> <todo-title slot=\"todo-title\" v-bind:title=\"title\"></todo-title>

Vue插槽實現原理

前言 vue.js的靈魂是元件，而元件的靈魂是插槽。藉助於插槽，我們能最大程度上實現元件複用。本文主要是對插槽的實現機制進行詳細概括總結，在某些場景中，有一定的用處。知其然知其所以然，掌握vue.js實現原理，不僅

淺談Vue插槽實現原理

目錄一、樣例程式碼二、透過現象看本質三、實現原理四、父元件編譯階段五、父元件生成渲染方法六、父元件生成VNode七、子元件狀態初始化八、子元件編譯階段九、子元件生成渲染方法十、使用技巧10.1、具名插槽10.2、作

Vue插槽slot理解與初體驗 ~

Vue插槽 一、插槽的理解 官網介紹 Vue 實現了一套內容分發的 API，將 <slot> 元素作為承載分發內容的出口。