VUE 插槽(vue cli的環境下)

2021-09-24 22:39:33 字數 1161 閱讀 1631

1、什麼是插槽

vue 實現了一套內容分發的 api,什麼是內容分發?

看例子 =>eg:

乙個父元件引用乙個子元件

顯示結果:

然後你會發現,你使用的這個子元件也是乙個雙標籤,能不能在裡面放點東西,會不會顯示?然後你就要使用插槽來進行內容分發

我加了乙個行文字可以顯示嗎

再看一下結果:這樣你寫的那行文字就會出現,

2、為什麼要用插槽,什麼情況下要用插槽

用插槽,就是為了內容分發,這種情況其實很常見,我們需要在的呼叫的子元件裡面新增一些內容,但是我們又不希望內容寫死在子元件裡面,通過使用插槽,我們就可以像正常使用普通的標籤

這樣往裡面放東西並且可以顯示出來。

3、插槽的用法

(1)普通插槽

普通插槽就是子元件裡面放置乙個標籤即可,在父元件呼叫子元件雙標籤時候裡面寫什麼都會被放進子元件的slot顯示出來,可以參考標題1裡面的例子使用

(2)具名插槽:用template標籤和slot屬性的屬性值和子元件的slot標籤的name屬性對應

通過例子說明 => eg:

我這裡對應紅色的插槽  

我是對應藍色的插槽

我是預設插槽

(3)作用域插槽 =>作用域插槽很好的作用就是可以讓父元件很簡單的獲取到子元件的資料

情況一:只使用預設插槽

v-slot是固定,

default是對應插槽的name屬性值,就是具名插槽,預設時候就直接給個default

「」雙引號的名字隨便填寫,是給自己使用的

-->

}

結果如下:

vue插槽樣式 vue中的插槽slot

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

vue cli快速搭建Vue開發環境

安裝nodejs 建議安裝 lts 版本 安裝vue cli g引數表示全域性安裝 npm install vue cli g使用vue cli初始化乙個vue專案 my project 是專案名稱,可以根據需要修改 vue init webpack my projectcd到專案目錄中安裝相關依賴...

Vue中的插槽 具名插槽 作用域插槽

1 vue中插槽的作用和使用方法 定義乙個名cmpone子元件,為該子元件新增內容應該在子元件的template中定義,直接在父元件的標籤中裡定義的內容不會被渲染,如下例 使用插槽後渲染的內容span cmp one div const cmpone const vm newvue script 結...