Vue 技巧之控制父類的 slot

更新時間：2020年02月24日 08:52:39 作者：前端小智

插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。

首先來思考一個問題：是否有一種方法可以從子組件填充父組件的插槽？

最近一位同事問我這個問題，答案很簡單：可以的。但我的解決方案可能和你想的完全不一樣，這是涉及一個棘手的Vue架構(gòu)問題，但也是一個非常有趣的問題。

為什么會有這個問題

在我們的應(yīng)用程序中，我們有一個頂部欄，其中包含不同的按鈕、搜索欄和其他一些控件。根據(jù)每個人所在的頁面，它可能略有不同，因此我們需要一種基于每個頁面配置它的方法。

為此，我們希望每個頁面都能夠配置操作欄?？雌饋砗芎唵?，但這里有個問題

這個頂部欄(我們稱之為ActionBar)實際上是我們的主布局的一部分，結(jié)構(gòu)如下：

<template>
 <div>
  <FullPageError />
  <ActionBar />
  <App />
 </div>
</template>

根據(jù)你所在的頁面/路線動態(tài)注入App的位置。

我們可以使用ActionBar上的一些插槽來配置它。但是，我們?nèi)绾螐?code>App組件中控制這些插槽？

定義問題

首先，最好是盡可能清楚地知道我們要解決的問題。

我們來看一個具有一個子組件和一個插槽的組件：

// Parent.vue
<template>
 <div>
  <Child />
  <slot />
 </div>
</template>

我們可以這樣填充Parent的插槽：

// App.vue
<template>
 <Parent>
  <p>This content goes into the slot</p>
 </Parent>
</template>

這里沒什么特別的。。。

填充子組件的插槽很容易，這也是使用插槽的最常見方式。

但是，有沒有一種方法可以控制從Child組件內(nèi)部進(jìn)入Parent組件slot的內(nèi)容呢？

換種說法：我們可以讓子組件填充父組件的插槽嗎？來看看我想到的第一個解決方案。

向下使用 props，向上使用 event

數(shù)據(jù)流經(jīng)組件樹的唯一途徑是使用props。而向上通信的方法是使用事件。這意味著，如果要讓子組件與父組件進(jìn)行通信，我們需要使用事件來實現(xiàn)。

因此，我們將使用事件來將內(nèi)容傳遞到ActionBars槽中

import SlotContent from './SlotContent';

export default {
 name: 'Application',
 created() {
  // As soon as this component is created we'll emit our events
  this.$emit('slot-content', SlotContent);
 }
};

我們將要放入插槽中的所有內(nèi)容打包到SlotContent組件中。一旦創(chuàng)建了應(yīng)用程序組件，我們就會發(fā)出slot-content事件，并傳遞我們要使用的組件。

我們的組件結(jié)構(gòu)如下：

<template>
 <div>
  <FullPageError />
  <ActionBar>
   <Component :is="slotContent" />
  </ActionBar>
  <App @slot-content="component => slotContent = component" />
 </div>
</template>

監(jiān)聽該事件，并將slotContent設(shè)置為我們的App組件發(fā)送給我們的任何內(nèi)容。然后，使用內(nèi)置的Component，就可以動態(tài)地渲染該組件。

但是，通過事件傳遞組件感覺很奇怪，并非是主流的做法。幸運的是，還有一種方法可以完全避免使用事件。

使用 $options

由于Vue組件只是 JS 對象，因此我們可以向它們添加所需的任何屬性。無需使用事件傳遞插槽內(nèi)容，我們只需將其作為字段添加到組件中即可：

 // App.vue
import SlotContent from './SlotContent';

export default {
 name: 'Application',
 slotContent: SlotContent,
 props: { /***/ },
 computed: { /***/ },
};

在主頁中通過 App.slotContent 獲取對應(yīng)的組件

<template>
 <div>
  <FullPageError />
  <ActionBar>
   <Component :is="slotContent" />
  </ActionBar>
  <App />
 </div>
</template>

import App from './App';
import FullPageError from './FullPageError';
import ActionBar from './ActionBar';

export default {
 name: 'Scaffold',
 components: {
  App,
  FullPageError,
  ActionBar,
 }
 data() {
  return {
   slotContent: App.slotContent,
  }
 },
};

這更像是靜態(tài)配置，更美觀、更簡潔，但這仍然是不對的。

理想情況下，我們不會在代碼中混合使用范式，所有操作應(yīng)該都是以聲明方式完成。

但是在這里，我們沒有將我們的組件組合在一起，而是將它們作為 JS 對象傳遞。如果我們能以正常的Vue方式把我們想要的寫在插槽里就好了。

考慮 Portal（傳送門）

Vue 中的 Portal 技術(shù) 在 Vue 項目中，我們使用模板來聲明 dom
嵌套關(guān)系，然而有時候一些組件需要脫離固定的層級關(guān)系，不再受制與層疊上下文，比如說 Modal 和 Dialog
這種組件就希望能夠脫離當(dāng)前模板所在的層疊上下文。

在 Vue 中有兩種方式來實現(xiàn)這種效果，一種是使用指令，操作真實 dom，使用熟知的 dom 操作方法將指令所在的元素 append
到另外一個 dom 節(jié)點上去。另一種方式就是定義一套組件，將組件內(nèi)的 vnode 轉(zhuǎn)移到另外一個組件中去，然后各自渲染。

它們的工作方式和你想象的完全一樣。你可以把任何東西從一個地方傳送到另一個地方。在我們的例子中，我們將元素從DOM中的一個位置“傳送”到另一個位置。

無論組件樹如何顯示，我們都可以控制組件在DOM中的顯示位置。

例如，假設(shè)我們想要填充一個modal。但是我們的modal必須在根頁面處渲染，這樣我們才能正確地覆蓋它。首先，我們要在modal中指定我們想要的：

<template>
 <div>
  <!-- Other components -->
  <Portal to="modal">
   Rendered in the modal.
  </Portal>
 </div>
</template>

然后，在我們的modal組件中，我們將擁有另一個將內(nèi)容渲染出來的 portal：

<template>
 <div>
  <h1>Modal</h1>
  <Portal from="modal" />
 </div>
</template>

這是一項改進(jìn)，因為現(xiàn)在我們實際上是在編寫HTML，而不僅僅是傳遞對象。它更具聲明性，更容易查看應(yīng)用程序中發(fā)生的事情。

由于 portal 在背后執(zhí)行一些操作以在不同位置渲染元素，因此它完全打破了DOM渲染在Vue中工作方式的模型。看起來您正在正常渲染元素，但根本無法正常工作，這可能會引起很多混亂和沮喪。

還有一個很大的問題，稍后我們會講到。

提升狀態(tài)

“提升狀態(tài)”是指將狀態(tài)從子組件移動到父組件或祖父組件，將它向上移動到組件樹中。

這可能對應(yīng)用程序的體系結(jié)構(gòu)產(chǎn)生較大的影響。對于我們的目的，這會是更簡單的解決方案。

這里的“狀態(tài)”是我們試圖傳遞到ActionBar組件插槽中的內(nèi)容。但是該狀態(tài)包含在Page組件中，我們不能真正將 page 特定的邏輯移到layout組件中。我們的狀態(tài)必須保留在我們正在動態(tài)渲染的Page組件內(nèi)。

因此，我們必須提升整個Page組件才能提升狀態(tài)。當(dāng)前，我們的Page組件是Layout組件的子組件：

<template>
 <div>
  <FullPageError />
  <ActionBar />
  <Page />
 </div>
</template>

解除它需要我們將其翻轉(zhuǎn)，并使Layout組件成為Page組件的子組件。我們的Page組件看起來像這樣：

<template>
 <Layout>
  <!-- Page-specific content -->
 </Layout>
</template>

現(xiàn)在，我們的Layout組件將看起來像這樣，我們可以在其中使用插槽插入頁面內(nèi)容：

<template>
 <div>
  <FullPageError />
  <ActionBar />
  <slot />
 </div>
</template>

但這還不能讓我們自定義任何內(nèi)容。我們必須在Layout組件中添加一些命名的插槽，以便我們可以傳遞應(yīng)放置在ActionBar中的內(nèi)容。

最簡單的方法是使用一個插槽來完全替代ActionBar組件：

<template>
 <div>
  <FullPageError />
  <slot name="actionbar">
   <ActionBar />
  </slot>
  <slot />
 </div>
</template>

這樣，如果你不指定“actionbar”插槽，默認(rèn)使用ActionBar組件。但我們可以使用自己的自定義ActionBar配置覆蓋此插槽：

<template>
 <Layout>
  <template #actionbar>
   <ActionBar>
    <!-- Custom content that goes into the action bar -->
   </ActionBar>
  </template>
  <!-- Page-specific content -->
 </Layout>
</template>

對我來說，這是一種理想的處理方式，但是它確實需要我們重構(gòu)頁面的布局方式。對于界面復(fù)雜點的，這可能是一項艱巨的任務(wù)。

簡化一下

當(dāng)我們第一次定義問題時：