Vue.js 中的無渲染行爲插槽

時間 2019-12-27

標籤 vue.js vue 渲染行爲插槽欄目 JavaScript 简体版

原文原文鏈接

做者：David Desmaisons
翻譯：瘋狂的技術宅javascript

原文：https://alligator.io/vuejs/re...html

未經容許嚴禁轉載前端

在本文中咱們討論 Vue 中的無渲染插槽模式可以幫助解決哪些問題。vue

在 Vue.js 2.3.0 中引入的做用域插槽顯著提升了組件的可重用性。無渲染組件模式應運而生，解決了提供可重用行爲和可插入表示的問題。java

在這裏，咱們將會看到如何解決相反的問題：怎樣提供可重用的外觀和可插入的行爲。node

無渲染組件

這種模式適用於實現複雜行爲且具備可自定義表示的組件。git

它知足如下功能：程序員

該組件實現全部行爲
做用域的插槽負責渲染
後備內容可以確保組件能夠直接使用。

舉個例子：一個執行 Ajax 請求並顯示結果的插槽的組件。組件處理 Ajax 請求並加載狀態，而默認插槽提供演示。github

這是一個簡化版的實現：面試

<template>
  <div>
    <slot v-if="loading" name="loading">
        <div>Loading ...</div>
    </slot>
    <slot v-else v-bind={data}>
    </slot>
  </div>
</template>

<script>
export default {
  props: ["url"],
  data: () => ({
    loading: true,
    data: null
  }),
  async created() {
    this.data = await fetch(this.url);
    this.loading = false;
  }
};
</script>

用法：

<lazy-loading url="https://server/api/data">
  <template #default="{ data }">
    <div>{{ data }}</div>
  </template>
</lazy-loading>

有關這種模式的原始文章，請在這裏查看。

一個相反的問題

若是問題反過來該怎麼辦：想象一下，若是一個組件的主要特徵就是它的表示形式，另外它的行爲應是可自定義的。

假設你想要基於 SVG 建立一個樹組件，以下所示：

你想要提供 SVG 的顯示和行爲，例如在單擊時收回節點和突出顯示文本。

當你打算不對這些行爲進行硬編碼，而且讓組件的用戶自由覆蓋它們時，就會出現問題。

暴露這些行爲的簡單解決方案是向組件添加方法和事件。

你可能會這樣去實現：

<script>
export default {
  mounted() {
    // pseudo code
    nodes.on('click',(node) => this.$emit('click', node));
  },
  methods: {
    expandNode(node) {
      //...
    },
    retractNode(node) {
      //...
    },
    highlightText(node) {
      //...
    },
  }
};
</script>

若是組件的使用者要向組件添加行爲，須要在父組件中使用 ref，例如：

<template>
  <tree ref="tree" @click="onClick"></tree>
</template>

<script>
export default {
  methods: {
    onClick(node) {
      this.$refs.tree.retractNode(node);
    }
  }
};
</script>

這種方法有幾個缺點：

沒法再提供默認行爲
行爲代碼最終會被頻繁的複製粘貼
行爲不可重用

讓咱們看看無渲染插槽如何解決這些問題。

無渲染插槽

行爲基本上包括證實對事件的反應。因此讓咱們建立一個插槽，用來接收對事件和組件方法的訪問：

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
    </slot>
  </div>
</template>

<script>
export default {
  methods: {
    expandNode(node) { },
    retractNode(node) { },
   //...
  },
  computed:{
    actions() {
      const {expandNode, retractNode} = this;
      return {expandNode, retractNode};
    },
    on() {
      return this.$on.bind(this);
    }
  }
};
</script>

on 屬性是父組件的 $on 方法，所以能夠監聽全部事件。

能夠將行爲實現爲無渲染組件。接下來編寫點擊擴展組件：

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("click", (node) => {
      this.actions.expandNode(node);
    });
  }
};

用法：

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
  </template>
</tree>

該解決方案的主要優勢是：

經過備用內容來提供默認行爲的可能性：

例如，經過將圖形組件聲明爲：

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
      <expand-on-click v-bind="{ on, actions }"/>
    </slot>
  </div>
</template>

可以建立可重用的組件，並能夠實現使用這個組件的用戶可以選擇的標準行爲

考慮一個懸停突出顯示組件：

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("hover", (node) => {
      this.actions.highlight(node);
    });
  }
};

覆蓋標準行爲：

<tree>
  <template #behavior="{ on, actions }">
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

行爲插槽是可組合的

添加兩個預約義的行爲：

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>