Vue中無渲染組件的示例

小編給大家分享一下Vue中無渲染組件的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

無渲染組件

這種模式適用于實現復雜行為且具有可自定義表示的組件。

它滿足以下功能：

1. 該組件實現所有行為

2. 作用域的插槽負責渲染

3. 后備內容能夠確保組件可以直接使用。

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

這是一個簡化版的實現：

<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>

這種方法有幾個缺點：

1. 無法再提供默認行為

2. 行為代碼最終會被頻繁的復制粘貼

3. 行為不可重用

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

無渲染插槽

行為基本上包括證明對事件的反應。所以讓我們創建一個插槽，用來接收對事件和組件方法的訪問：

<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>

• 解決方案的可讀性

作為行為的組件是能夠自描述的。

• 可擴展性

on 屬性可以訪問所有組件事件。默認情況下，該插槽可使用新事件。

以上是“Vue中無渲染組件的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！