Vue学习笔记(八) 组件进阶
1、插槽
（1）插槽內容
像 HTML 元素一樣，我們常常需要給組件傳遞內容
比如在下面的例子中，我們給自定義組件 prompt-info 傳入 出錯啦 的文本
<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info>出錯啦</prompt-info></div></body></html>但是，結果并不像我們所想的，出錯啦 的提示信息沒有顯示出來，這時候我們就可以使用 <slot> 解決這個問題
<slot> 就是插槽，也就是說我們需要先在組件中留下一個位置，然后才能在使用的時候把傳入的內容放進去
Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot></slot></div>` })我們還可以為插槽提供默認內容，但是它僅僅會在沒有提供內容的時候顯示出來
Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot>不好意思</slot></div>` })在定義好插槽后就可以正常顯示傳入的內容啦，事實上我們不僅可以傳入簡單的文本，還可以傳入任何模板代碼
<div id="app"><prompt-info><span>出錯啦</span><p>請稍后再試</p></prompt-info> </div>（2）插槽數據
考慮一個問題，上面我們傳入的模板代碼中是沒有包含數據的，假如現在我們使用數據會發生什么呢？
這里面還有一定的講究
- 數據在父級模板中定義，在父級模板中使用：例如下面的 msg
- 數據在子模板中定義，在子模板中使用：例如下面的 info
- 數據在子模板中定義，在父級模板中使用
這次沒有這么簡單，我們先來看一份簡單的代碼：
<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info>{{ info }}</prompt-info></div></body></html>實際上，這份代碼不會被正確編譯，控制臺會輸出錯誤信息：info is not defined
這是因為 父級模板里的所有內容都是在父級作用域中編譯的，子模板里的所有內容都是在子作用域中編譯的
如果我們希望讓插槽內容訪問子組件數據，可以怎么做呢？
首先，我們需要在 <slot> 元素上使用 v-bind 指令綁定數據（綁定在 <slot> 元素上的特性稱為 插槽 prop）
然后，我們就可以在組件上使用 v-slot 指令獲取并使用 插槽 prop
（注意，在這里使用 v-slot 的語法為 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）具名插槽
好，下面我們再來考慮另一個問題，當我們需要使用多個插槽時，應該怎么對它們進行區分呢？
答案是在定義的時候使用 name 特性為插槽命名，然后在使用的時候還是使用 v-slot 指令指定插槽
（注意，在這里使用 v-slot 的語法為 v-slot:slotName，與上面的語法并不沖突）
<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><prompt-info><template v-slot:header><p>服務離家出走啦</p></template><!-- 沒有使用 v-slot 指令指定的元素默認放在 default 插槽 --><template><p>請稍后再試</p></template><template v-slot:footer><p>不好意思</p></template></prompt-info></div></body></html>- 具名插槽的縮寫：
同 v-on 和 v-bind 指令一樣，Vue 也為 v-slot 指令提供了縮寫
<!-- 完整語法 --> <template v-slot:header>...</template><!-- 縮寫 --> <template #header>...</template>- 獨占默認插槽的縮寫：
當只有一個默認插槽時，我們可以直接把 v-slot 用在組件上：
Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot></slot> </div>` }) <prompt-info v-slot:default="slotProps"></prompt-info>但是只要出現多個插槽，請始終為所有的插槽使用完整的基于 <template> 的語法：
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、動態組件 & 異步組件
（1）動態組件
動態組件其實就是動態切換組件，我們可以通過 <component> 元素配合 is 特性實現，來看一個簡單的例子
<!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>當每次切換組件時，Vue 都會創建一個 currentTabComponent 實例
但是，有的時候我們卻希望能夠保持組件的狀態，以避免反復重渲染導致的性能問題
這時候我們可以通過 <keep-alive> 元素實現，包裹在該元素內的組件在第一次創建時會被緩存起來
<keep-alive><component v-bind:is="currentTabComponent"></component> </keep-alive>（2）異步組件
異步組件其實就是異步加載組件，我們可以通過工廠函數定義組件，一個簡單的例子如下
<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><p>Hello</p><my-component></my-component></div></body></html>我們還可以在工廠函數中返回 Promise 對象，把 webpack 和 ES2015 語法結合在一起使用
Vue.component('my-component', () => import('./async-component'))3、邊界情況
（1）訪問元素
絕大多數情況下，我們不應該觸及另一個組件實例內部或手動操作 DOM 元素，但是也的確存在這樣的情況
- 訪問父級組件實例
- 訪問子組件實例
- 訪問子元素
- 依賴注入
使用 provide 選項指定提供什么數據給后代，然后在任何后代組件中都可以使用 inject 選項接收數據
<!DOCTYPE html> <html><head><title>Demo</title></head><body><div id="app"><my-component></my-component></div></body></html>轉載于:https://www.cnblogs.com/wsmrzx/p/11219825.html
總結
以上是生活随笔為你收集整理的Vue学习笔记(八) 组件进阶的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql04
- 下一篇： react和vue配置本地代理