slot vue 具名專題及常見問題 - CSDN

2021-01-09 CSDN技術社區

vue的slot1、什麼是slot

slot是插槽，插即是可以插入，槽就是坑，即是可以再代碼中插入
如果子組件模板中不包含插口，那麼父組件的內容將會被丟棄。當子組件模板中有一個麼有屬性的插槽時，父組件傳入的整個內容片段，將插入到插槽所在的dom的位置，並替換掉插槽標籤本身。
舉例：

<html> <head> <meta charset="utf-8"> <title>Vue 父子組件通信之子組件索引</title> </head> <body> <div id="app"> <child-component> <p>正文內容</p> <p>更多的正文內容</p> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: '\ <div>\ <div>\ </div>\ <div>\ <div>\ <div>\ <div>\ </div>' }) var app = new Vue({ el: '#app', }) </script> </body></html>


當子組件有slot的時候，舉例

<html> <head> <meta charset="utf-8"> <title>Vue 父子組件通信之子組件索引</title> </head> <body> <div id="app"> <child-component> <h2 slot="header">標題</h2> <p>正文內容</p> <p>更多的正文內容</p> <div slot="footer">底部信息</div> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: '\ <div>\ <div>\ </div>\ <div>\ <slot ></slot>\ <slot name="header" ></slot>\ <div>\ <div>\ <div>\ </div>' }) var app = new Vue({ el: '#app', }) </script> </body></html>


slot作用域

作用域是指：子組件中的數據，在父組件中可以被引用。

<html> <head> <meta charset="utf-8"> <title>Vue 父子組件通信之子組件索引</title> </head> <body> <div id="app"> <child-component> <h2 slot="header">標題</h2> <p>正文內容</p> <p>更多的正文內容</p> <div slot="test" slot-scope="testMore"> {{testMore.testText}} </div> <div slot="footer">底部信息</div> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: '\ <div>\ <div>\ </div>\ <div>\ <slot ></slot>\ <slot name="test" testText="作用域文字"></slot>\ <slot name="header" ></slot>\ <div>\ <div>\ <div>\ </div>' }) var app = new Vue({ el: '#app', }) </script> </body></html>



參考網址：https://www.jianshu.com/p/0d8952ff4227

相關焦點

  • vue 具名插槽詳解專題及常見問題 - CSDN
    插槽含義：就是引入子組件後，在插入子組件元素中添加信息或者標籤，使得子組件的指定位置插入信息或者標籤插槽有三種：默認插槽、具名插槽、作用域插槽，由於vue2.6.0後對插槽進行修改，但是兼容2.6.0前的版本，博文中只說明2.6.0後的插槽，vue3.0後面會去除2.60前的版本兼容　　一、默認插槽<
  • slot vue 用法專題及常見問題 - CSDN
    -- 例1, 不帶 name 的 slot --> <slot>匿名插槽</slot> <!-- 例2, 匿名插槽出口會帶有隱含的名字「default」 --> <!
  • template標籤 vue 作用專題及常見問題 - CSDN
    > <slot name='header'></slot> </header> <main> <slot></slot> </main> <footer> <
  • vue 作用域插槽的使用專題及常見問題 - CSDN
    關於vue插槽，也用過很多次了，但是關於作用域插槽的用法，有些模糊，查了很多文檔，自己理解記憶。那麼問題來了，肯定會有這樣的業務需求啊，這時候，就要用作用域插槽了。我將這個概念理解為：子組件的插槽要在父組件裡使用子組件內部的數據，可以靈活的渲染子組件的dom結構以及數據。
  • table vue插槽的使用 - CSDN
    插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上，一個slot最核心的兩個問題在這裡就點出來了，是顯示不顯示和怎樣顯示。但是插槽顯示的位置卻由子組件自身決定，slot寫在組件template的什麼位置，父組件傳過來的模板將來就顯示在什麼位置。1、插槽內容　　vue實現了一套內容分發的api，將 slot 元素作為承載內容分發的出口。　　插槽內可以包含任何模板代碼，包括html，以及其他組件。
  • Vue之插槽(slot)
    比如圖標定義，動態內容定義，都可以通過slot的方法來完成。以上說的都是以插槽內容為主的使用說明，都是一對一（slot）的組件，下面我接著講一講一對多（slot）的時候的用法。v-slot：使用說明（一對多）v-slot:是主要針對具名插槽 也就是多個slot中需要用到的功能，在這裡我以官方的DEMO來做簡單的說明 以上為定義好的具名插槽模板（<base-layout>）。
  • a標籤 href vue專題及常見問題 - CSDN
    vue.js 實現a標籤href裡添加參數原始碼列表可以正常顯示，但是連接沒有實現對items.orderNo的值轉化，最中解決方法
  • ref vue 獲取文本專題及常見問題 - CSDN
    ref的官網介紹https://cn.vuejs.org/v2/api/#ref需求在普通的js操作中，一般都是直接操作dom元素，但是對於Vue.js框架來說，一般是不允許直接操作dom元素的。那麼其實Vue.js框架提供了ref獲取dom元素，以及組件引用。
  • 如何寫一個vue組件專題及常見問題 - CSDN
    如何使用vue寫一個組件庫新建vue項目使用vue-cli初始化一個項目：vue init webpack VueComponentcd VueComponentnpm installnpm run dev以上就新建好了一個vue項目項目目錄首先，定義好目錄，經過觀察大多數的組件庫，基本是這樣的目錄
  • vue組件詳解—使用slot分發內容
    三、slot用法3.1 單個slot在子組件內使用特殊的＜slot>元素就可以為這個子組件開啟一個slot（插槽），在父組件模板裡，插入在子組件標籤內的所有內容將替代子組件的<slot> 標籤及它的內容。
  • 4種可用於組織大型Vue.js項目的最佳實踐
    這就是在大型項目中將要面臨的真實情況，不過，Vue.js可以提供針對此問題的現場解決方案。我們可以在Vue.js中使用slots來提供表示父子關係的另一種方法，slots提供了將內容放置在新位置的渠道。
  • c++ 槽函數專題及常見問題 - CSDN
    &slot, connect_position position = at_back)它作為signal的成員函數，具有三個參數，第一個參數表示這個槽所屬的組，第二的參數表示信號觸發哪個槽函數，而最後的參數，表示槽函數在響應隊列中響應的位置，默認at_back表示這個槽函數出來隊列的末尾，它將在其他槽函數之後被調用。
  • Particle Effect for Vue
    演示地址Vue Particle Effect Buttons安裝教程將 particle-effect.vue 複製到你的項目目錄中，自行修改適配。particles-amount-coefficient="3"    :oscillation-coefficient="20"    @begin="onBegin"    @complete="onComplete"  >    BUTTON CONTENT GOES HERE  </ParticleEffect></template>ParticleEffect組件中，由於使用了slot
  • vue高級進階系列——用typescript玩轉vue和vuex
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫用過vue的朋友大概對vuex也不陌生，vuex的官方解釋是專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
  • 什麼是VUE?VUE與JS的對比
    1.1. vue的引入先看下面這樣一個簡單的例子,實現了這樣一個功能數據的雙向綁定:也就是數據的同步修改我們需要讓所有綁定的對象和元素都能感知到變化1.1.1. vue與js的對比1.1.1.1. js的實現(了解)<!
  • vue.js初入門(十一組件-下篇)
    一個常見錯誤是試圖在父組件模板內將一個指令綁定到子組件的屬性/方法：假定 someChildProperty 是子組件的屬性，上例不會如預期那樣工作。父組件模板不應該知道子組件的狀態。單個 Slot除非子組件模板包含至少一個 <slot> 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片段將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤本身。
  • Vue全家桶之什麼是Vuex
    對於問題一，傳參的方法對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能為力。對於問題二，我們經常會採用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式就會變得非常脆弱，通常會導致無法維護的代碼。
  • Vue 3 的最新進展
    尤雨溪表示，由於在 Vue 3 上花費的大部分時間都投入到了設計和構建穩定的內核上，不過要讓整個框架處於"ready"狀態，不僅僅是內核的問題，還需要有兼容版本的支持庫 （Vue Router, Vuex, test utils）、工具（CLI、eslint 插件、瀏覽器開發工具擴展、IDE 擴展）和文檔（包括針對新用戶和用於遷移的文檔）。
  • vue3.0手機聊天室|Vue3+Vant3仿微信界面
    項目簡介Vue3Chat是基於vue3.x+vuex4+vue-router4全家桶技術和vant3.x構建開發的一款mobile仿微信界面聊天實例。實現了發送圖文消息、圖片|視頻預覽、位置查看、紅包|朋友圈等功能。
  • 5分鐘帶你入門vuex(vue狀態管理)
    如果你之前使用過vue.js，你一定知道在vue中各個組件之間傳值的痛苦，在vue中我們可以使用vuex來保存我們需要管理的狀態值，值一旦被修改，所有引用該值的地方就會自動更新，那麼接下來我們就來學習一下vuex是如何修改狀態值的：我們新建一個vue項目（這裡由於我們是講解vuex，所以對於vue項目的創建我們不會講解太詳細）；在命令行輸入 vue init