Vue中v slot的用法

記錄一下vue插槽的用法，以免忘記。包含預設插槽，具名插槽，作用域插槽的用法，預設插槽和具名插槽都可以是作用域插槽，本示例中三個都包含作用域。@vue/cli4.0.5

父元件test.vue

'test'

>
="test"
>
for=
"info in msg"
:key=
"info.firstname"
>
"header"
:data=
"info"
>
}<
/slot>
<
/header>
}<
/h2>
"text" v-model=
"hi"
/>
<
/div>
"footer"
:data=
"bean"
>
}<
/slot>
<
/footer>
"dog"
>
<
/slot>
<
/main>
<
/div>
<
/template>
export
default};
},props:};
<
/script>

="about"
>
this is an about page<
/h1>
"persons"
:bean=
"me"
>
"scope"
>
}<
/el-button>
<
/template>
"scope"
>
}<
/el-button>
<
/template>
="scope"
>
}<
/h2>
<
/template>
<
/test>
<
/div>
<
/template>
import test from
"@/components/test.vue"
;export
default
, persons:[,
,]};
},components:};
<
/script>

Vue中v slot插槽的使用

在vue2.6.0以上版本v slot將取代slot scope和slot。這裡取代的意思是 v slot在呼叫時取代了 slot 和 slot scope，而在template中宣告時仍會用solt進行宣告插槽。匿名插槽 1.匿名插槽 template cpn1 div vue.component...

vue 2 6 插槽v slot用法記錄

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

詳解vue2 6插槽更新v slot用法總結

插槽一共就三大類 1.匿名插槽 也叫預設插槽 沒有命名,有且只有乙個 2.具名插槽 相對匿名插槽元件slot標籤帶name命名的 3.作用域插槽 子元件內資料可以被父頁面拿到 解決了資料只能從父頁面傳遞給子元件 一 匿名插槽 也叫預設插槽default父頁面呼叫子元件 子v slot default...