如何在Vue中使用更復雜的插槽
小編:管理員 122閱讀 2022.08.18
Vue.js是一個易于使用的Web應用程序框架，可用于開發交互式前端應用程序。
在本文中，我將介紹命名插槽和作用域插槽。
命名插槽有時我們的模板中會有多個插槽。為了區分每個插槽，我們必須給它們命名。
我們可以使用name屬性定義具有命名插槽的組件，如下所示：
Vue.component("layout", { template: ` <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> `});
復制
然后我們可以將上述組件一起使用，如下所示：
src/index.js:
Vue.component("layout", { template: ` <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> `});
new Vue({ el: "#app"});
復制
index.html:
<!DOCTYPE html><html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <layout> <template v-slot:header> <h1>Header</h1> </template> <p>Main</p> <template v-slot:footer> <p>Footer</p> </template> </layout> </div> <script src="src/index.js"></script> </body></html>復制
填充具有header名稱的插槽：
<template v-slot:header> <h1>Header</h1></template>復制
填充具有footer名稱的插槽：
<template v-slot:footer> <p>Footer</p></template>復制
填充沒有名稱的插槽：
<p>Main</p>復制
我們還可以使用v-slot:default填充沒有名字的默認插槽，如下所示：
<template v-slot:default> <p>Main</p></template>復制
無論哪種方式，渲染出來的HTML都是相同的。
作用域插槽我們可以使用作用域插槽來訪問子組件中的數據。
為了使子組件中的數據在父組件中可用，我們可以使用v-bind指令。
一個簡單的示例，從父級去獲取子級組件數據如下：
src/index.js:
Vue.component("user", { data() { return { user: { firstName: "Joe", lastName: "Smith" } }; }, template: `<p> <slot v-bind:user="user"></slot> </p>`});
new Vue({ el: "#app"});
復制
index.html:
<!DOCTYPE html><html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </user> </div> <script src="src/index.js"></script> </body></html>
復制
在上面的代碼中，我們設置了子組件上的插槽數據：
<p> <slot v-bind:user="user"></slot></p>復制
在根Vue實例中就可以使用user了。
然后在根模板中，我們可以這樣使用user：
<user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template></user>
復制
通過slotProps訪問用戶的數據，slotProps可以訪問子組件中的v-bind提供的所有數據。
單獨默認插槽的縮寫語法如果只有一個默認插槽，那么我們可以直接在子組件上使用v-slot:default或v-slot，如下所示：
<user v-slot:default="slotProps"> {{
復制
<user v-slot="slotProps"> {{ slotProps.user.firstName }}</user>
復制
如果還有其他命名的插槽，則可能存在歧義，因此無法使用上述語法。
如果我們有多個插槽，那么我們必須老老實實編寫如下內容：
src/index.js:
Vue.component("user", { data() { return { user: { firstName: "Joe", lastName: "Smith" } }; }, template: `<p> <slot v-bind:user="user" name='first-name'></slot> <slot v-bind:user="user" name='last-name'></slot> </p>`});
new Vue({ el: "#app"});
復制
index.html:
<!DOCTYPE html><html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <user> <template v-slot:first-name="slotProps"> {{ slotProps.user.firstName }} </template> <template v-slot:last-name="slotProps"> {{ slotProps.user.lastName }} </template> </user> </div> <script src="src/index.js"></script> </body></html>
復制
在上面的代碼中，我們必須明確命名插槽，然后才能分別通過v-slot:first-name="slotProps"和v-slot:last-name="slotProps"訪問子組件的數據。
另外，我們將插槽內容包裝在template中。
解構作用域插槽數據我們可以使用解構賦值運算符來解構插槽作用域數據。
例如，我們可以按以下方式使用它：
src/index.js:
Vue.component("user", { data() { return { user: { firstName: "Joe", lastName: "Smith" } }; }, template: `<p> <slot v-bind:user="user" name='first-name'></slot> <slot v-bind:user="user" name='last-name'></slot> </p>`});
new Vue({ el: "#app"});
復制
index.html:
<!DOCTYPE html><html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <user> <template v-slot:first-name="{ user }"> {{ user.firstName }} </template> <template v-slot:last-name="{ user }"> {{ user.lastName }} </template> </user> </div> <script src="src/index.js"></script> </body></html>
復制
在上面的代碼中，我們沒有使用slotProps，而是將其更改為{ user }。{ user }與slotProps.user相同。
最后我們可以使用命名插槽和作用域插槽創建多個插槽，并分別從父級的子級組件中去訪問數據。
命名插槽可防止歧義，并允許我們使用多個插槽。
另外，我們可以在子組件中使用v-bind，然后在組件中使用slotProps從父組件訪問子組件的數據。
相關推薦
- Vue3（二）工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能，網上資料也很多，這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等?？梢院蜕弦黄腸nd方式做項目做一下對比。node.js，npm、cnpm、yarnnode.js執行 npm run serve ，…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…
粵公網安備 44010402000066號