Slot Vue中的插槽

2022-06-25 02:54:15 字數 1330 閱讀 4355

什麼是插槽?

插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而是模板分塊,具有模組化的特質和更大的重要性。

插槽的顯示和不顯示,怎樣顯示是由父元件來控制,而插槽在**顯示是由子元件來進行控制的。

在這個專案中,插槽的用法:

提取頭部模組元件:

1.建立headertop資料夾,建立vue檔案headertop。

用slot插槽佔位,用name來區分內容(可以理解為乙個類名)

想要放入的內容用},這裡title隨意,但是與props中的對應

props用來接收父元件傳遞過來的值,string是接收的型別

4.那麼在父元件中如何使用呢?

1.在父元件中,匯入子元件,並掛載到components上

2.其中 title裡的值,就是子元件接收的};slot="left",是將這個部分放在,子元件的slot="left",佔位的地方。

後來在實習工作中發現還用具名插槽這個東西

就是你封裝了乙個元件,可能其他地方在這裡傳遞的是乙個字型圖示,在另外的地方又是另乙個漢字或者其他的字型圖示,那麼重新封裝元件可能麻煩,可以使用具名插槽;

可以看看下面的用法:

當在父元件中引用頭部子元件的時候,如果沒有指定插槽渲染模板,那麼就是按照頭部子元件中預設的樣式渲染;

否則就按照模板指定的樣式渲染:

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

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

vue插槽樣式 vue中的插槽slot

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

vue中匿名插槽,具名插槽和作用域插槽例子

子元件中要直接展示父元件傳遞過來的dom內容 root 子元件 header slot header header div 需要向子元件傳遞的dom footer slot footer footer div 需要向子元件傳遞的dom body content div vue.component b...