Vue中無渲染組件的示例-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、網(wǎng)站制作、鄧州網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、鄧州網(wǎng)絡(luò)營銷、鄧州企業(yè)策劃、鄧州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鄧州建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

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

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

無渲染組件

這種模式適用于實現(xiàn)復(fù)雜行為且具有可自定義表示的組件。

它滿足以下功能：

  1. 該組件實現(xiàn)所有行為

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

  3. 后備內(nèi)容能夠確保組件可以直接使用。

舉個例子：一個執(zhí)行 Ajax 請求并顯示結(jié)果的插槽的組件。組件處理 Ajax 請求并加載狀態(tài)，而默認插槽提供演示。

這是一個簡化版的實現(xiàn)：

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

有關(guān)這種模式的原始文章，請在這里查看。

一個相反的問題

如果問題反過來該怎么辦：想象一下，如果一個組件的主要特征就是它的表示形式，另外它的行為應(yīng)是可自定義的。

假設(shè)你想要基于 SVG 創(chuàng)建一個樹組件，如下所示：

Vue中無渲染組件的示例

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

當你打算不對這些行為進行硬編碼，并且讓組件的用戶自由覆蓋它們時，就會出現(xiàn)問題。

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

你可能會這樣去實現(xiàn)：

<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. 行為代碼最終會被頻繁的復(fù)制粘貼

  3. 行為不可重用

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

無渲染插槽

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

<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 方法，因此可以監(jiān)聽所有事件。

可以將行為實現(xiàn)為無渲染組件。接下來編寫點擊擴展組件：

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>

該解決方案的主要優(yōu)點是：

  • 通過備用內(nèi)容來提供默認行為的可能性：

例如，通過將圖形組件聲明為：

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

  • 能夠創(chuàng)建可重用的組件，并可以實現(xiàn)使用這個組件的用戶能夠選擇的標準行為

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

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>

  • 行為插槽是可組合的

添加兩個預(yù)定義的行為：

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

  • 解決方案的可讀性

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

  • 可擴展性

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

以上是“Vue中無渲染組件的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：Vue中無渲染組件的示例-創(chuàng)新互聯(lián)
標題來源：http://muchs.cn/article26/degccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、網(wǎng)站排名、品牌網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司