Vue插槽的作用
1. 默認(rèn)插槽
概述:
當(dāng)子組件模板只有一個(gè)沒有屬性的插槽時(shí),父組件傳入的整個(gè)內(nèi)容片段將插入到插槽所在的 DOM 位置,并替換掉插槽標(biāo)簽本身。
使用:
父組件:
<template> <div> <h3 class="title">App組件</h3> <hr /> <!-- 替換默認(rèn)插槽中的內(nèi)容 --> <child> <h3>我是標(biāo)題</h3> </child> <!-- 顯示默認(rèn)插槽中的內(nèi)容 --> <child /> <!-- 顯示默認(rèn)插槽中的內(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> <!-- 聲明位置,用于在調(diào)用此組件為雙標(biāo)簽時(shí),中間內(nèi)容顯示的位置 --> <!-- 單個(gè)插槽,一個(gè)組件只能有一個(gè)默認(rèn)插槽 --> <!-- <slot name="default"></slot> --> <!-- 簡寫 --> <slot>默認(rèn)</slot> </div> </template> <script> export default { data() { return {} }, methods: {} } </script> <style lang="scss" scoped></style>
2. 具名插槽
概述:
有時(shí)我們需要多個(gè)插槽,來完成對(duì)應(yīng)的數(shù)據(jù)自定義顯示。一個(gè)不帶 name 的 <slot>
插槽會(huì)帶有隱含的名字“default”,即默認(rèn)插槽。帶 name 即為具名插槽。
使用:
父組件:
<template> <div> <h3 class="title">App組件</h3> <hr /> <child> <!-- 具名插槽 --> <!-- vue2.6之前寫法 -- 重復(fù)調(diào)用會(huì)依次執(zhí)行顯示,即都會(huì)顯示 --> <!-- <h3 slot="header">我是文章標(biāo)題1</h3> --> <!-- <h3 slot="header">我是文章標(biāo)題2</h3> --> <!-- <h3 slot="header">我是文章標(biāo)題3</h3> --> <!-- vue2.6及之后寫法 它只能寫在template中,不能直接寫在html標(biāo)簽上 --> <!-- vue2.6之后的具名插槽,重復(fù)調(diào)用,只會(huì)執(zhí)行最后1次 --> <!-- <template v-slot:header> --> <!-- 簡寫:v-slot:header == #header --> <template #header> <h3>我是文章標(biāo)題1</h3> </template> <template #header> <h3>我是文章標(biāo)題2</h3> </template> <!-- 只會(huì)顯示它 --> <template #header> <h3>我是文章標(biāo)題3</h3> </template> <!-- 默認(rèn)插槽 --> <div>默認(rèn)插槽</div> </child> </div> </template> <script> // 同步導(dǎo)入 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添加一個(gè)名稱,名稱不能重復(fù) --> <slot name="header">默認(rèn)頭部</slot> <!-- 默認(rèn)插槽 --> <slot>默認(rèn)</slot> </div> </template> <script> export default { data() { return {} }, methods: {} } </script> <style lang="scss" scoped></style>
3. 作用域插槽
概述:
作用域插槽是一種特殊類型的插槽,用作一個(gè) (能被傳遞數(shù)據(jù)的)可重用模板,來代替已經(jīng)渲染好的元素。在子組件中,只需將數(shù)據(jù)傳遞到插槽,就像你將 prop 傳遞給組件一樣。
在封裝組件的過程中,可以為預(yù)留的<slot>
插槽綁定props 數(shù)據(jù),這種帶有props 數(shù)據(jù)的 <slot>
叫做“作用域插槽”。作用域插槽就是在具名插槽的基礎(chǔ)上,多了數(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標(biāo)簽替換為了button標(biāo)簽 --> <button @click="del(index)">刪除</button> </template> </child> </div> </template> <script> // 同步導(dǎo)入 import child from "./components/child.vue"; export default { components: { child, }, data() { return { users: [ { id: 1, name: "張三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ], }; }, methods: { // 傳過來的index是一個(gè)對(duì)象,所以需要解構(gòu)一下 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>
到此這篇關(guān)于Vue插槽的作用的文章就介紹到這了,更多相關(guān)Vue插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue 自動(dòng)檢測手機(jī)端響應(yīng)式布局的五種實(shí)現(xiàn)
本文主要介紹了vue自動(dòng)檢測手機(jī)端響應(yīng)式布局,可以通過結(jié)合 CSS 媒體查詢、Vue 的動(dòng)態(tài)數(shù)據(jù)綁定、適當(dāng)?shù)牡谌綆?、PostCSS 插件以及正確的視口設(shè)置實(shí)現(xiàn),感興趣的可以了解一下2024-07-07Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入
本文主要介紹了Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06Vue中在data里面調(diào)用method方法的實(shí)現(xiàn)
這篇文章主要介紹了Vue中在data里面調(diào)用method方法的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06