Vue插槽的作用
1. 默認插槽
概述:
當子組件模板只有一個沒有屬性的插槽時,父組件傳入的整個內(nèi)容片段將插入到插槽所在的 DOM 位置,并替換掉插槽標簽本身。
使用:
父組件:
<template> <div> <h3 class="title">App組件</h3> <hr /> <!-- 替換默認插槽中的內(nèi)容 --> <child> <h3>我是標題</h3> </child> <!-- 顯示默認插槽中的內(nèi)容 --> <child /> <!-- 顯示默認插槽中的內(nèi)容 --> <child></child> </div> </template> <script> import child from './components/child.vue' export default { components: { child }, data() { return {} }, methods: {} } </script> <style lang="scss" scoped></style>
子組件:
<template> <div> <h3>child組件</h3> <!-- 聲明位置,用于在調用此組件為雙標簽時,中間內(nèi)容顯示的位置 --> <!-- 單個插槽,一個組件只能有一個默認插槽 --> <!-- <slot name="default"></slot> --> <!-- 簡寫 --> <slot>默認</slot> </div> </template> <script> export default { data() { return {} }, methods: {} } </script> <style lang="scss" scoped></style>
2. 具名插槽
概述:
有時我們需要多個插槽,來完成對應的數(shù)據(jù)自定義顯示。一個不帶 name 的 <slot>
插槽會帶有隱含的名字“default”,即默認插槽。帶 name 即為具名插槽。
使用:
父組件:
<template> <div> <h3 class="title">App組件</h3> <hr /> <child> <!-- 具名插槽 --> <!-- vue2.6之前寫法 -- 重復調用會依次執(zhí)行顯示,即都會顯示 --> <!-- <h3 slot="header">我是文章標題1</h3> --> <!-- <h3 slot="header">我是文章標題2</h3> --> <!-- <h3 slot="header">我是文章標題3</h3> --> <!-- vue2.6及之后寫法 它只能寫在template中,不能直接寫在html標簽上 --> <!-- vue2.6之后的具名插槽,重復調用,只會執(zhí)行最后1次 --> <!-- <template v-slot:header> --> <!-- 簡寫:v-slot:header == #header --> <template #header> <h3>我是文章標題1</h3> </template> <template #header> <h3>我是文章標題2</h3> </template> <!-- 只會顯示它 --> <template #header> <h3>我是文章標題3</h3> </template> <!-- 默認插槽 --> <div>默認插槽</div> </child> </div> </template> <script> // 同步導入 import child from './components/child.vue' export default { components: { child }, data() { return {} }, methods: {} } </script> <style lang="scss" scoped></style>
子組件:
<template> <div> <h3>child組件</h3> <!-- 具名插槽,給slot添加一個名稱,名稱不能重復 --> <slot name="header">默認頭部</slot> <!-- 默認插槽 --> <slot>默認</slot> </div> </template> <script> export default { data() { return {} }, methods: {} } </script> <style lang="scss" scoped></style>
3. 作用域插槽
概述:
作用域插槽是一種特殊類型的插槽,用作一個 (能被傳遞數(shù)據(jù)的)可重用模板,來代替已經(jīng)渲染好的元素。在子組件中,只需將數(shù)據(jù)傳遞到插槽,就像你將 prop 傳遞給組件一樣。
在封裝組件的過程中,可以為預留的<slot>
插槽綁定props 數(shù)據(jù),這種帶有props 數(shù)據(jù)的 <slot>
叫做“作用域插槽”。作用域插槽就是在具名插槽的基礎上,多了數(shù)據(jù)的傳遞。
語法:
# 子組件中 Vue.component('child', { template: ` <div class="child"> <slot name="default" text="我是子組件中的內(nèi)容"></slot> </div> ` }) # 父組件中 <div class="parent"> <child> // 老寫法 <div name="default" slot-scope="props"> <div>父組件</div> <h3>{{ props.text }}</h3> </div> // 新寫法 <template #default="props"> <div> <div>父組件</div> <h3>{{ props.text }}</h3> </div> </template> </child> </div>
使用:
父組件:
<template> <div> <h3 class="title">App組件</h3> <hr /> <child :users="users"> <!-- vue2.6之前的寫法 --> <!-- <button slot="del" slot-scope="index" @click="del(index)">刪除</button> --> <!-- vue2.6之后的寫法 --> <!-- <template v-slot:del="index">,即<template v-slot:[變量]="index">--> <!-- vue2.6之后的寫法簡寫 --> <!-- 父組件接收子組件通過作用于插槽傳過來的index --> <template #del="index"> <!-- 把子組件中的span標簽替換為了button標簽 --> <button @click="del(index)">刪除</button> </template> </child> </div> </template> <script> // 同步導入 import child from "./components/child.vue"; export default { components: { child, }, data() { return { users: [ { id: 1, name: "張三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ], }; }, methods: { // 傳過來的index是一個對象,所以需要解構一下 del({ index }) { console.log("app", index); }, }, }; </script> <style lang="scss" scoped></style>
子組件:
<template> <div> <h3>child組件</h3> <hr /> <ul> <li v-for="(item, index) in users" :key="item.id"> <span> {{ item.name }} </span> <span> <!-- 讓插槽傳數(shù)據(jù) 作用域插槽 --> <!-- 子組件將index通過作用域插槽傳給父組件 --> <slot name="del" :index="index"> <span @click="del(index)">刪除</span> </slot> </span> </li> </ul> </div> </template> <script> export default { props: ['users'], data() { return {} }, methods: { del(index) { console.log(index) } } } </script> <style lang="scss" scoped></style>
到此這篇關于Vue插槽的作用的文章就介紹到這了,更多相關Vue插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
誤引用vuex-persistedstate導致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導致用戶信息無法清除問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vite使用unplugin-auto-import實現(xiàn)vue3中的自動導入
本文主要介紹了Vite使用unplugin-auto-import實現(xiàn)vue3中的自動導入,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06Vue中在data里面調用method方法的實現(xiàn)
這篇文章主要介紹了Vue中在data里面調用method方法的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06