當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue学习笔记(八) 组件进阶

發(fā)布時(shí)間：2023/12/10 vue 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue学习笔记(八) 组件进阶小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、插槽

（1）插槽內(nèi)容

像 HTML 元素一樣，我們常常需要給組件傳遞內(nèi)容

比如在下面的例子中，我們給自定義組件 prompt-info 傳入出錯(cuò)啦的文本

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info>出錯(cuò)啦</prompt-info></div></body></html>

但是，結(jié)果并不像我們所想的，出錯(cuò)啦的提示信息沒(méi)有顯示出來(lái)，這時(shí)候我們就可以使用 <slot> 解決這個(gè)問(wèn)題

<slot> 就是插槽，也就是說(shuō)我們需要先在組件中留下一個(gè)位置，然后才能在使用的時(shí)候把傳入的內(nèi)容放進(jìn)去

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot></slot></div>` })

我們還可以為插槽提供默認(rèn)內(nèi)容，但是它僅僅會(huì)在沒(méi)有提供內(nèi)容的時(shí)候顯示出來(lái)

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot>不好意思</slot></div>` })

在定義好插槽后就可以正常顯示傳入的內(nèi)容啦，事實(shí)上我們不僅可以傳入簡(jiǎn)單的文本，還可以傳入任何模板代碼

（2）插槽數(shù)據(jù)

考慮一個(gè)問(wèn)題，上面我們傳入的模板代碼中是沒(méi)有包含數(shù)據(jù)的，假如現(xiàn)在我們使用數(shù)據(jù)會(huì)發(fā)生什么呢？

這里面還有一定的講究

數(shù)據(jù)在父級(jí)模板中定義，在父級(jí)模板中使用：例如下面的 msg

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info>{{ msg }}</prompt-info></div></body></html>

數(shù)據(jù)在子模板中定義，在子模板中使用：例如下面的 info

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info></prompt-info></div></body></html>

數(shù)據(jù)在子模板中定義，在父級(jí)模板中使用

這次沒(méi)有這么簡(jiǎn)單，我們先來(lái)看一份簡(jiǎn)單的代碼：

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info>{{ info }}</prompt-info></div></body></html>

實(shí)際上，這份代碼不會(huì)被正確編譯，控制臺(tái)會(huì)輸出錯(cuò)誤信息：info is not defined

這是因?yàn)?父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的，子模板里的所有內(nèi)容都是在子作用域中編譯的

如果我們希望讓插槽內(nèi)容訪問(wèn)子組件數(shù)據(jù)，可以怎么做呢？

首先，我們需要在 <slot> 元素上使用 v-bind 指令綁定數(shù)據(jù)（綁定在 <slot> 元素上的特性稱為 插槽 prop）

然后，我們就可以在組件上使用 v-slot 指令獲取并使用 插槽 prop

（注意，在這里使用 v-slot 的語(yǔ)法為 v-slot='slotProps'）

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info v-slot='slotProps'>{{ slotProps.info }}</prompt-info></div></body></html>

（3）具名插槽

好，下面我們?cè)賮?lái)考慮另一個(gè)問(wèn)題，當(dāng)我們需要使用多個(gè)插槽時(shí)，應(yīng)該怎么對(duì)它們進(jìn)行區(qū)分呢？

答案是在定義的時(shí)候使用 name 特性為插槽命名，然后在使用的時(shí)候還是使用 v-slot 指令指定插槽

（注意，在這里使用 v-slot 的語(yǔ)法為 v-slot:slotName，與上面的語(yǔ)法并不沖突）

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info><template v-slot:header><p>服務(wù)離家出走啦</p></template><template><p>請(qǐng)稍后再試</p></template><template v-slot:footer><p>不好意思</p></template></prompt-info></div></body></html>

具名插槽的縮寫(xiě)：

同 v-on 和 v-bind 指令一樣，Vue 也為 v-slot 指令提供了縮寫(xiě)

<template v-slot:header>...</template> <template #header>...</template>

獨(dú)占默認(rèn)插槽的縮寫(xiě)：

當(dāng)只有一個(gè)默認(rèn)插槽時(shí)，我們可以直接把 v-slot 用在組件上：

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot></slot> </div>` }) <prompt-info v-slot:default="slotProps"></prompt-info>

但是只要出現(xiàn)多個(gè)插槽，請(qǐng)始終為所有的插槽使用完整的基于 <template> 的語(yǔ)法：

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot name="header"></slot><slot></slot> <slot name="footer"></slot></div>` }) <prompt-info v-slot:default="slotProps"><template v-slot:header="slotProps"></template><template v-slot:default="slotProps"></template><template v-slot:footer="slotProps"></template> </prompt-info>

2、動(dòng)態(tài)組件 & 異步組件

（1）動(dòng)態(tài)組件

動(dòng)態(tài)組件其實(shí)就是動(dòng)態(tài)切換組件，我們可以通過(guò) <component> 元素配合 is 特性實(shí)現(xiàn)，來(lái)看一個(gè)簡(jiǎn)單的例子

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><button v-for="tab in tabs" v-on:click="currentTab = tab">{{ tab }}</button><component v-bind:is="currentTabComponent"></component></div></body></html>

當(dāng)每次切換組件時(shí)，Vue 都會(huì)創(chuàng)建一個(gè) currentTabComponent 實(shí)例

但是，有的時(shí)候我們卻希望能夠保持組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問(wèn)題

這時(shí)候我們可以通過(guò) <keep-alive> 元素實(shí)現(xiàn)，包裹在該元素內(nèi)的組件在第一次創(chuàng)建時(shí)會(huì)被緩存起來(lái)

<keep-alive><component v-bind:is="currentTabComponent"></component> </keep-alive>

（2）異步組件

異步組件其實(shí)就是異步加載組件，我們可以通過(guò)工廠函數(shù)定義組件，一個(gè)簡(jiǎn)單的例子如下

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><p>Hello</p><my-component></my-component></div></body></html>

我們還可以在工廠函數(shù)中返回 Promise 對(duì)象，把 webpack 和 ES2015 語(yǔ)法結(jié)合在一起使用

Vue.component('my-component', () => import('./async-component'))

3、邊界情況

（1）訪問(wèn)元素

絕大多數(shù)情況下，我們不應(yīng)該觸及另一個(gè)組件實(shí)例內(nèi)部或手動(dòng)操作 DOM 元素，但是也的確存在這樣的情況

訪問(wèn)父級(jí)組件實(shí)例

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><my-component></my-component></div></body></html>

訪問(wèn)子組件實(shí)例

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><button v-on:click="showMsg()">打印信息</button><my-component ref="page"></my-component></div></body></html>

訪問(wèn)子元素

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><button v-on:click="changeText()">改變文本</button><p ref="page">Hello World</p></div></body></html>

依賴注入

使用 provide 選項(xiàng)指定提供什么數(shù)據(jù)給后代，然后在任何后代組件中都可以使用 inject 選項(xiàng)接收數(shù)據(jù)

<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><my-component></my-component></div></body></html>

轉(zhuǎn)載于:https://www.cnblogs.com/wsmrzx/p/11219825.html

總結(jié)

以上是生活随笔為你收集整理的Vue学习笔记(八) 组件进阶的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。