vue中的slot插槽學習記錄

2021-10-06 20:09:58 字數 550 閱讀 1407

vue中插槽主要是__在父元件中對映子元件資料及內容用的__;

在沒有改版之前分為:普通插槽、具名插槽、作用域插槽(帶著資料的插槽,就是可以直接使用父元件對映過來的值);根據名字不同,很容易就明白作用了;廢棄了就只做個了解;

改版之後,使用v-slot來表示,且限制了只能用在__component和template__上,其他的標籤如改版之前常用來舉例子的列表等標籤上都會報錯。【v-slot:slotname】也有簡寫,【#slotname】(我以前常見有**是#default='***』的,懵逼了半天這default的意思,不過想想vue是指令當道,查了一下#才知道)後面有了值,就是原來作用域插槽了;另外,還具備了【動態插槽名v-slot:[attrstate]=『msg』】。

注意:1) 單獨在 [ ] 方括號中也可以使用表示式,但是不能存在引號和空格

2) 當然 這個動態的值 可以通過 方法,計算屬性,或者 data資料 裡面的內容。重要的是這個動態的值 是 引用元件的 作用域。簡單點說就是父級元件的作用域。

另外,還增加了【解構插槽】,應該算作是公升級了原來的作用域插槽,還可以設定預設值的內容。

vue插槽樣式 vue中的插槽slot

插槽 slot 是元件的一塊html模板,父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置,父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個,可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...

Vue中的slot插槽

前言 之前學vue對插槽只有乙個模糊的存值概念,最近在封裝自定義元件時,再次學習一下。通過slot插槽向元件內部指定位置傳遞內容,通過slot可以父子傳參,簡化了進行自定義元件的封裝和使用。自己對插槽理解 就是乙個站位html模板,用來攜帶內容,插入到合適的位置,由父元件來決定其顯示的內容,使得模組...

vue中的slot(插槽)

1 slot 基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import vue from vue 定義元件componentone const compoentone 呼叫元件 newvue el id data template 使用插槽 2 具名插槽 給具體的插槽命名,並在使用的時...