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

子元件中要直接展示父元件傳遞過來的dom內容

"root"

>
//子元件
="header" slot=
"header"
>header<
/div>
//需要向子元件傳遞的dom
="footer" slot=
"footer"
>footer<
/div>
//需要向子元件傳遞的dom
<
/body-content>
<
/div>
vue.
component
('body-content',)
var vm =
newvue()
<
/script>

子元件做迴圈或某一部分他的dom結構由外部傳入進來的時候

子元件可以向父元件裡面傳資料，父元件通過template標籤上的 slot-scope 上的屬性接收資料

如：父元件給子元件傳了乙個插槽，作用域插槽必須是乙個以開頭和結尾的內容，宣告乙個slot-scope=「props」,從子元件接收的資料都放到props裡面，

"root"

>
//子元件
"props"
>
//接收子元件傳過來的值
}<
/h1>
<
/template>
<
/child>
<
/div>
vue.
component
('child',}
template:'
for=
"item of list"
:item=item>
//向父元件傳值
<
/slot>
<
/ul>' 
})var vm =
newvue()
<
/script>

具名插槽和匿名插槽 vue 插槽

插槽就是子元件中的提供給父元件使用的乙個佔位符，用 表示，父元件可以在這個佔位符中填充任何模板 如 html 元件等，填充的內容會替換子元件的標籤。1.插槽 建立slots.vue 主檔案引入 原生效果 插槽效果。這樣在中間可以巢狀內容 這裡的內容會被插入到slots中顯示 我是插槽 2.預設插槽 ...

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

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

元件 插槽 匿名插槽 具名插槽

單個插槽 匿名插槽 1.1 子元件定義為 1.2 父元件向一下這樣使用子元件 your profile 1.3渲染出來的 html 將會是 your profile 需要多個插槽時，可以利用元素的乙個特殊的特性 name來定義具名插槽2.1子元件模板定義 2.2.1父元件使用子元件，節點上使用slo...