Vue中v slot插槽的使用

在vue2.6.0以上版本v-slot將取代slot-scope和slot。

這裡取代的意思是：v-slot在呼叫時取代了 slot 和 slot-scope，而在template中宣告時仍會用solt進行宣告插槽。

匿名插槽

1.匿名插槽 --

>
>
<
/template>
<
/cpn1>
<
/div>
vue.
component
('cpn1',)
newvue
()

2.具名插槽 --

>
>
<
/template>
<
/cpn2>
<
/div>
vue.
component
('cpn2',)
newvue()
<
/script>

3.作用域插槽 --

>
>
default是指在編譯時會去子級作用域中取當前子元件中的user屬性 --
>
default
="slotprops"
>
}<
/template>
<
/cpn3>
<
/div>
vue.
component
('cpn3',}
}})new
vue(
)<
/script>

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
"../js/vue.js"
>
<
/script>
<
/head>
1.匿名插槽 --
>
>
<
/template>
<
/cpn1>
<
/div>
vue.
component
('cpn1',)
newvue()
<
/script>
2.具名插槽 --
>
>
<
/template>
<
/cpn2>
<
/div>
vue.
component
('cpn2',)
newvue()
<
/script>
3.作用域插槽 --
>
>
default是指在編譯時會去子級作用域中取當前子元件中的user屬性 --
>
default
="slotprops"
>
}<
/template>
<
/cpn3>
<
/div>
vue.
component
('cpn3',}
}})new
vue(
)<
/script>
<
/body>
<
/html>

vue 2 6 插槽v slot用法記錄

總結vue2.6統一了插槽的語法v slot 在其他元件中使用child元件 hello world child元件 上面是具名插槽的用法，省略插槽名 name屬性或插槽名為default表示匿名插槽 在其他元件中使用child元件 用法一 常規用法，slotprops為自定義作用網域名稱 hell...

Vue中的v slot詳解，作用域插槽和具名插槽

1 具名插槽 有時候我們希望在指定的位置輸出我們的子元素，這時候具名插槽就排上了用場。元件呼叫時 這裡v slot 後邊的值與元件內的slot的name屬性對應，也就是插槽的名稱。list 書寫元件時 這裡name的值就是這個插槽的名稱。最後我們會在我們想要的位置將我們的元素放置。2 作用域插槽 作...

Vue中v slot的用法

記錄一下vue插槽的用法，以免忘記。包含預設插槽，具名插槽，作用域插槽的用法，預設插槽和具名插槽都可以是作用域插槽，本示例中三個都包含作用域。vue cli4.0.5 父元件test.vue test test for info in msg key info.firstname header da...