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

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為宿豫企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、成都做網(wǎng)站，宿豫網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

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

無(wú)渲染組件

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

它滿(mǎn)足以下功能：

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

2. 作用域的插槽負(fù)責(zé)渲染

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

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

這是一個(gè)簡(jiǎn)化版的實(shí)現(xiàn)：

用法：

  
    
{{ data }}
  

有關(guān)這種模式的原始文章，請(qǐng)?jiān)谶@里查看。

一個(gè)相反的問(wèn)題

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

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

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

當(dāng)你打算不對(duì)這些行為進(jìn)行硬編碼，并且讓組件的用戶(hù)自由覆蓋它們時(shí)，就會(huì)出現(xiàn)問(wèn)題。

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

你可能會(huì)這樣去實(shí)現(xiàn)：

如果組件的使用者要向組件添加行為，需要在父組件中使用 ref，例如：

這種方法有幾個(gè)缺點(diǎn)：

1. 無(wú)法再提供默認(rèn)行為

2. 行為代碼最終會(huì)被頻繁的復(fù)制粘貼

3. 行為不可重用

讓我們看看無(wú)渲染插槽如何解決這些問(wèn)題。

無(wú)渲染插槽

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

on 屬性是父組件的 $on 方法，因此可以監(jiān)聽(tīng)所有事件。

可以將行為實(shí)現(xiàn)為無(wú)渲染組件。接下來(lái)編寫(xiě)點(diǎn)擊擴(kuò)展組件：

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

  render: () => null,

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

用法：

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

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

例如，通過(guò)將圖形組件聲明為：

• 能夠創(chuàng)建可重用的組件，并可以實(shí)現(xiàn)使用這個(gè)組件的用戶(hù)能夠選擇的標(biāo)準(zhǔn)行為

考慮一個(gè)懸停突出顯示組件：

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

  render: () => null,

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

覆蓋標(biāo)準(zhǔn)行為：

• 行為插槽是可組合的

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

• 解決方案的可讀性

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

• 可擴(kuò)展性

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

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