Vue中v slot的用法

2021-09-29 08:39:41 字數 1383 閱讀 1177

記錄一下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.vue

="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...