vue 2 6 插槽v slot用法記錄

2021-09-23 10:35:32 字數 813 閱讀 9867

總結vue2.6統一了插槽的語法v-slot

在其他元件中使用child元件

hello world

child元件

上面是具名插槽的用法,省略插槽名:name屬性或插槽名為default表示匿名插槽

在其他元件中使用child元件

用法一:常規用法,slotprops為自定義作用網域名稱

hello world

}

用法二:解構插槽prop,實際上就是es6解構json,可以使用:替換引數名

hello world

}}

child元件,定義時將需要使用的作用域資料繫結在即可,:user="user" :age="age"

v-slot:
vue2.6後插槽的用法簡單得了很多,也更加靈活,通過上面的示例可以看出,作用域插槽實際上就是在具名插槽的基礎上進行賦值

v-slot:插槽名

v-slot:插槽名="作用網域名稱"

v-slot="作用網域名稱"

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

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

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中v slot的用法

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