vue插槽的使用

父元件

// 父元件

// 呼叫子元件
"color:red"
>我預設插槽內容<
/p>
<
/slotone1>
<
/div>

子元件

vue.

component
('soltonel'
,)

乙個元件中只能有乙個預設插槽。相對應的，具名插槽就可以有很多個，只要名字（name屬性）不同就可以了

父元件

// 父元件

// 呼叫子元件
'footer' style=
"color:red"
>我是具名插槽內容0
<
/p>
'footers' style=
"color:pink"
>我是具名插槽內容1
<
/p>
<
/slotone1>
<
/div>

子元件

vue.

component
('soltonel'
,)

父元件

>

"scope"
>
for=
"(item, index) in scope.datalist" v-bind:key=
"index"
>
}<
/div>
<
/template>
<
/slot-three>
<
/div>
var vm new
vue(
,mounted()
})<
/script>

子元件

vue.

component
('slot-three',,
,]}}
,      template:
`        
`,      methods:
})

vue插槽使用

1.2插槽 ps 僅供本人記憶 1.2.1為什麼要使用插槽？插槽可以使元件更具備擴充套件性！vue插槽文件 1.2.2插槽的基本使用 給子元件定義乙個插槽 slot元素 父元件在使用子元件時，填充子元件的插槽。在子元件標籤中編寫的html內容，會替換掉子元件的slot元素 可以給中設定預設要展示的內...

vue插槽的使用

什麼是插槽？插槽 slot 是 vue 提出來的乙個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，且具有模組化的特質和更大的重要性，插槽顯不顯示 怎樣顯示是由父元件來控制的，而插槽在 顯示就由子元件來進行控制 用 slot 元素將不同的dom 樹組合在一起，s...

Vue 插槽的使用

專案中具名插槽使用的較多。封裝的通用提示元件，如 上圖截的是登出提示，有的時候不同的情況下提示元件的提示內容不一樣，這就要根據具體情況更改 元件中的text內容 首先父元件使用prompt子元件 在向具名插槽提供內容的時候，我們可以在乙個元素上使用v slot指令，並以v slot的引數的形式提供其...