記錄-VUE中常用的4種高級方法

来源:https://www.cnblogs.com/smileZAZ/archive/2023/05/06/17378176.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. provide/inject provide/inject 是 Vue.js 中用於跨組件傳遞數據的一種高級技術，它可以將數據註入到一個組件中，然後讓它的所有子孫組件都可以訪問到這個數據。通常情況下，我們在父組件中使用 provid ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1. provide/inject

provide/inject 是 Vue.js 中用於跨組件傳遞數據的一種高級技術，它可以將數據註入到一個組件中，然後讓它的所有子孫組件都可以訪問到這個數據。通常情況下，我們在父組件中使用 provide 來提供數據，然後在子孫組件中使用 inject 來註入這個數據。

使用 provide/inject 的好處是可以讓我們在父組件和子孫組件之間傳遞數據，而無需手動進行繁瑣的 props 傳遞。它可以讓代碼更加簡潔和易於維護。但需要註意的是，provide/inject 的數據是非響應式的，這是因為provide/inject是一種更加底層的 API，它是基於依賴註入的方式來傳遞數據，而不是通過響應式系統來實現數據的更新和同步。

具體來說，provide方法提供的數據會被註入到子組件中的inject屬性中，但是這些數據不會自動觸發子組件的重新渲染，如果provide提供的數據發生了變化，子組件不會自動感知到這些變化並更新。

如果需要在子組件中使用provide/inject提供的數據，並且希望這些數據能夠響應式地更新，可以考慮使用Vue的響應式數據來代替provide/inject。例如，可以將數據定義在父組件中，並通過props將其傳遞給子組件，子組件再通過$emit來向父組件發送數據更新的事件，從而實現響應式的數據更新。

下麵是一個簡單的例子，展示瞭如何在父組件中提供數據，併在子孫組件中註入這個數據：

<!-- 父組件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  provide: {
    message: 'Hello from ParentComponent',
  },
  components: {
    ChildComponent,
  },
};
</script>

//上面provide還可以寫成函數形式
export default {
    provide(){
        return {
              message: this.message
        }
    }
}
<!-- 子組件 -->
<template>
  <div>
    <GrandchildComponent />
  </div>
</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  inject: ['message'],
  components: {
    GrandchildComponent,
  },
};
</script>
<!-- 孫子組件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
};
</script>

在上面的例子中，父組件中提供了一個名為 message 的數據，子孫組件中都可以使用 inject 來註入這個數據，併在模板中使用它。註意，子孫組件中的 inject 選項中使用了一個數組，數組中包含了需要註入的屬性名。在這個例子中，我們只註入了一個 message 屬性，所以數組中只有一個元素。

2. 自定義v-model

要使自定義的Vue組件支持v-model，需要實現一個名為value的prop和一個名為input的事件。在組件內部，將value prop 綁定到組件的內部狀態，然後在對內部狀態進行修改時觸發input事件。

下麵是一個簡單的例子，展示如何創建一個自定義的輸入框組件並支持v-model：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    value: String
  }
};
</script>
在上面的組件中，我們定義了一個value prop，這是與v-model綁定的數據。我們還將內置的input事件轉發為一個自定義的input事件，併在事件處理程式中更新內部狀態。現在，我們可以在父組件中使用v-model來綁定這個自定義組件的值，就像使用普通的輸入框一樣： 
<template>
  <div>
    <my-input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

在上面的代碼中，我們通過使用v-model指令來雙向綁定message數據和MyInput組件的值。當用戶在輸入框中輸入文本時，MyInput組件會觸發input事件，並將其更新的值發送給父組件，從而實現了雙向綁定的效果。

3. 事件匯流排（EventBus）

Vue事件匯流排是一個事件處理機制，它可以讓組件之間進行通信，以便在應用程式中共用信息。在Vue.js應用程式中，事件匯流排通常是一個全局實例，可以用來發送和接收事件。

以下是使用Vue事件匯流排的步驟：

3.1 創建一個全局Vue實例作為事件匯流排：

import Vue from 'vue';
export const eventBus = new Vue();

3.2 在需要發送事件的組件中，使用$emit方法觸發事件並傳遞數據：

eventBus.$emit('eventName', data);

3.3 在需要接收事件的組件中，使用$on方法監聽事件並處理數據：

eventBus.$on('eventName', (data) => {
  // 處理數據
});

需要註意的是，事件匯流排是全局的，所以在不同的組件中，需要保證事件名稱的唯一性。

另外，需要在組件銷毀前使用$off方法取消事件監聽：

eventBus.$off('eventName');

這樣就可以在Vue.js應用程式中使用事件匯流排來實現組件之間的通信了。

4. render方法

Vue 的 render 方法是用來渲染組件的函數，它可以用來替代模板語法，通過代碼的方式來生成 DOM 結構。相較於模板語法，render 方法具有更好的類型檢查和代碼提示。

下麵詳細介紹 Vue 的 render 方法的使用方法：

4.1 基本語法

render 方法的基本語法如下：

render: function (createElement) {
  // 返回一個 VNode
}

其中 createElement 是一個函數，它用來創建 VNode（虛擬節點），並返回一個 VNode 對象。

4.2 創建 VNode

要創建 VNode，可以調用 createElement 函數，該函數接受三個參數：

  • 標簽名或組件名
  • 可選的屬性對象
  • 子節點數組

例如，下麵的代碼創建了一個包含文本節點的 div 元素：

render: function (createElement) {
  return createElement('div', 'Hello, world!')
}

如果要創建一個帶有子節點的元素，可以將子節點作為第三個參數傳遞給 createElement 函數。例如，下麵的代碼創建了一個包含兩個子元素的 div 元素：

render: function (createElement) {
  return createElement('div', [
    createElement('h1', 'Hello'),
    createElement('p', 'World')
  ])
}

如果要給元素添加屬性，可以將屬性對象作為第二個參數傳遞給 createElement 函數。例如，下麵的代碼創建了一個帶有樣式和事件處理程式的 button 元素：

render: function (createElement) {
  return createElement('button', {
    style: { backgroundColor: 'red' },
    on: {
      click: this.handleClick
    }
  }, 'Click me')
},
methods: {
  handleClick: function () {
    console.log('Button clicked')
  }
}

4.3 動態數據

render 方法可以根據組件的狀態動態生成內容。要在 render 方法中使用組件的數據，可以使用 this 關鍵字來訪問組件實例的屬性。例如，下麵的代碼根據組件的狀態動態生成了一個帶有計數器的 div 元素：

render: function (createElement) {
  return createElement('div', [
    createElement('p', 'Count: ' + this.count),
    createElement('button', {
      on: {
        click: this.increment
      }
    }, 'Increment')
  ])
},
data: function () {
  return {
    count: 0
  }
},
methods: {
  increment: function () {
    this.count++
  }
}

4.4 JSX

在使用 Vue 的 render 方法時，也可以使用 JSX（JavaScript XML）語法，這樣可以更方便地編寫模板。要使用 JSX，需要在組件中導入 Vue 和 createElement 函數，併在 render 方法中使用 JSX 語法。例如，下麵的代碼使用了 JSX 語法來創建一個計數器組件：

import Vue from 'vue'

export default {
    render() {
        return (
            <div>
                <p>Count:{this.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        )
    },
    data() {
        return { count: 0 }
    },
    methods: {
        increment() {
            this.count++
        }
    }
}

註意，在使用 JSX 時，需要使用 {} 包裹 JavaScript 表達式。

4.5 生成函數式組件

除了生成普通的組件，render 方法還可以生成函數式組件。函數式組件沒有狀態，只接收 props 作為輸入，並返回一個 VNode。因為函數式組件沒有狀態，所以它們的性能比普通組件更高。

要生成函數式組件，可以在組件定義中將 functional 屬性設置為 true。例如，下麵的代碼定義了一個函數式組件，用於顯示列表項：

export default {
  functional: true,
  props: ['item'],
  render: function (createElement, context) {
    return createElement('li', context.props.item);
  }
}
註意，在函數式組件中，props 作為第二個參數傳遞給 render 方法。

本文轉載於:

https://juejin.cn/post/7225921305597820985

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何計算真實的資料庫成本
    本文分享自天翼雲開發者社區《如何計算真實的資料庫成本》 作者:王****乾 在雲計算占主導地位之前，計算資料庫的成本是一個非常簡單的等式：軟體成本+硬體成本=資料庫成本。如果你選擇了一個開源產品，軟體成本可能會消失。雖然雲計算已經從根本上改變了我們使用和部署軟體的方式，但仍有太多人在使用這種過時的計 ...
  • 一文詳解如何在 ChengYing 中通過產品線部署一鍵提升效率
    在之前的內容當中，我們為大家介紹過 ChengYing 的安裝原理、產品包製作等內容，本篇就延續之前的內容，和大家展開聊聊 ChengYing 產品線部署相關的設計。幫助對「一站式全自動化全生命周期大數據平臺運維管家 ChengYing」感興趣的開發者更好地瞭解和使用 ChengYing。 產品線部 ...
  • MySQL一次大量記憶體消耗的跟蹤
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 文章來源：GreatSQL社區原創 線上使用MySQL8.0.25的資料庫，通過監控發現資料庫在查詢一個視圖(80張表的union all)時記憶體和cp ...
  • 由淺入深學MYSQL之--MySQL分組查詢詳解
    前言 從今天開始本系列文內容就帶各位小伙伴學習資料庫技術。資料庫技術是Java開發中必不可少的一部分知識內容。也是非常重要的技術。本系列教程由淺入深, 全面講解資料庫體系。 非常適合零基礎的小伙伴來學習。 全文大約 【1066】字，不說廢話，只講可以讓你學到技術、明白原理的純乾貨！本文帶有豐富案例及 ...
  • 水平分庫分表排雷帖
    提起分庫分表，對於大部分伺服器開發來說，其實並不是一個新鮮的名詞。隨著業務的發展，我們表中的數據量會變的越來越大，欄位也可能隨著業務複雜度的升高而逐漸增多，我們為瞭解決單表的查詢性能問題，一般會進行分表操作。 同時我們業務的用戶活躍度也會越來越高，併發量級不斷加大，那麼可能會達到單個資料庫的處理能... ...
  • HMS Core 6.10.0版本發佈公告
    分析服務 ◆ 事件分析下新增商品訂閱分析報告，幫助開發者瞭解應用內用戶付費訂閱概況，評估訂閱付費價值； ◆ 營銷分析、用戶質量、轉化分析以及過濾器中，新增廣告系列/廣告任務通過ID進行搜索的功能，通過更便捷高效的數據分析體驗，幫助開發者合理評估廣告投放的後端轉化效果。 查看詳情>> 運動健康服務 ◆ ...
  • Flutter(十) 音頻+視頻播放
    在Flutter中，我們有各種插件可供使用，從而實現音頻和視頻的播放功能。 例如，可以使用“text_to_speech”插件來將文字轉換為語音，使用內置的“video_player”插件輕鬆地實現視頻播放，或者使用“audioplayers”插件實現音頻播放。 對於僅需要簡單播放器功能的情況，也可 ...
  • 前端配置化表單組件設計方法
    前端開發中涉及表單的頁面非常多，看似功能簡單，開發快速，實則占去了很大一部分時間。當某個表單包含元素過多時還會導致html代碼過多，vue文件過大。從而不容易查找、修改和維護。為了提高開發效率及降低維護成本，下麵介紹表單配置化組件的封裝原理與封裝方法。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類