Vue 組件之間傳遞參數

来源:https://www.cnblogs.com/yuzhihui/archive/2023/02/16/17125771.html
-Advertisement-
Play Games

一、Vue 2 1、父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然後在父組件中通過 v-bind 綁定相應的數據來傳遞數據。 父組件中的代碼： <template> <div> <child-component :prop-a="dataA"></child-compo ...


一、Vue 組件之間傳值的主要方法

Vue 3 對於組件之間傳遞值的基本思想與 Vue 2 相似，但是有一些語法和 API 上的改變，主要的傳值方法有以下幾種：

1、父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然後在父組件中通過 v-bind 綁定相應的數據來傳遞數據。

2、子組件向父組件傳值，使用 $emit：可以通過在子組件中使用 $emit 觸發自定義事件，併在父組件中使用 v-on 監聽相應的事件來傳遞數據。

3、兄弟組件之間傳值：可以通過使用一個共同的父組件，然後將需要共用的數據放在父組件的 data 中，再通過 props 將數據傳遞給各自的子組件。

4、跨級組件傳值，使用 provide 和 inject（同樣適用於父子組件傳值）：provide 可以在祖先組件中定義一個值或者方法，然後在子孫組件中使用 inject 來註入這個值或者方法。

5、使用全局事件匯流排：可以使用 Vue 的事件機制，通過在 Vue 實例上使用 $on 來監聽事件，然後在其他組件中使用 $emit 觸發相應的事件來傳遞數據。這種方式可以在任意組件之間傳遞數據。

6、使用 Vuex：當應用的數據狀態比較複雜或者需要在多個組件之間共用時，可以使用 Vuex，它是一個專為 Vue.js 應用程式開發的狀態管理模式。可以在任何組件中訪問和修改 Vuex 存儲的數據，通過 mutations 來修改狀態，通過 actions 來觸發 mutations。這種方式可以方便地在不同的組件中進行狀態管理和數據共用。

7、使用 $attrs 和 $listeners，$attrs 和 $listeners 是常用的兩個特殊屬性，它們可以用來向組件傳遞屬性和事件監聽器。

8、使用 $refs：可以使用 Vue 提供的 $refs 屬性來獲取組件實例，然後通過調用組件的方法來進行數據傳遞。這種方式不推薦使用，因為不易維護和調試。

9、使用事件匯流排庫：可以使用 Vue.js 的第三方庫如 Event Bus、Tiny-Emmiter 等來傳遞數據。這些庫提供了一種方便、簡單的方式來在不同的組件之間進行事件傳遞。但是需要註意，使用第三方庫可能會增加項目的複雜性和維護成本。

二、Vue 2 組件之間傳值示例代碼

  • 1、父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然後在父組件中通過 v-bind 綁定相應的數據來傳遞數據。

父組件中的代碼：

<template>
  <div>
    <child-component :prop-a="dataA"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dataA: 'data from parent',
    };
  },
};
</script>

子組件中的代碼：

<template>
  <div>
    {{ propA }}
  </div>
</template>

<script>
export default {
  props: {
    propA: String,
  },
};
</script>
  • 2、子組件向父組件傳值，使用 $emit：可以通過在子組件中使用 $emit 觸發自定義事件，併在父組件中使用 v-on 監聽相應的事件來傳遞數據。

子組件中的代碼：

<template>
  <div>
    <button @click="sendDataToParent">Send Data To Parent</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataB: 'data from child',
    };
  },
  methods: {
    sendDataToParent() {
      this.$emit('send-data', this.dataB);
    },
  },
};
</script>

父組件中的代碼：

<template>
  <div>
    <child-component @send-data="receiveDataFromChild"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    receiveDataFromChild(dataB) {
      console.log(dataB);
    },
  },
};
</script>
  • 3、兄弟組件之間傳值：可以通過使用一個共同的父組件，然後將需要共用的數據放在父組件的 data 中，再通過 props 將數據傳遞給各自的子組件。

父組件中的代碼：

<template>
  <div>
    <child-a :prop-a="dataA"></child-a>
    <child-b :prop-b="dataB"></child-b>
  </div>
</template>

<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

export default {
  components: {
    ChildA,
    ChildB,
  },
  data() {
    return {
      dataA: 'data from parent to child a',
      dataB: 'data from parent to child b',
    };
  },
};
</script>

子組件 A 中的代碼：

<template>
  <div>
    {{ propA }}
  </div>
</template>

<script>
export default {
  props: {
    propA: String,
  },
};
</script>

子組件 B 中的代碼：

<template>
  <div>
    {{ propB }}
  </div>
</template>

<script>
export default {
  props: {
    propB: String,
  },
};
</script>
  • 4、跨級組件傳值，使用 provide 和 inject（該方法也可用於父子組件傳值）：provide 可以在祖先組件中定義一個值或者方法，然後在子孫組件中使用 inject 來註入這個值或者方法。

祖先組件中的代碼：

<template>
  <div>
    <child-a></child-a>
  </div>
</template>

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

export default {
  components: {
    ChildA,
  },
  provide() {
    return {
      sharedData: 'data from ancestor',
    };
  },
};
</script>

子孫組件 A 中的代碼：

<template>
  <div>
    {{ sharedData }}
  </div>
</template>

<script>
export default {
  inject: ['sharedData'],
};
</script>
  • 5、使用全局事件匯流排：可以使用 Vue 的事件機制，通過在 Vue 實例上使用 $on 來監聽事件，然後在其他組件中使用 $emit 觸發相應的事件來傳遞數據。這種方式可以在任意組件之間傳遞數據。

在 main.js 中定義一個空的 Vue 實例作為事件匯流排：

import Vue from 'vue';

export const bus = new Vue();

子組件 A 中的代碼：

<template>
  <div>
    <button @click="sendDataToSibling">Send Data To Sibling</button>
  </div>
</template>

<script>
import { bus } from './main';

export default {
  methods: {
    sendDataToSibling() {
      bus.$emit('send-data', 'data from child a');
    },
  },
};
</script>

子組件 B 中的代碼：

<template>
  <div>
    {{ dataFromSibling }}
  </div>
</template>

<script>
import { bus } from './main';

export default {
  data() {
    return {
      dataFromSibling: '',
    };
  },
  mounted() {
    bus.$on('send-data', (data) => {
      this.dataFromSibling = data;
    });
  },
};
</script>
  • 6、使用 Vuex：當應用的數據狀態比較複雜或者需要在多個組件之間共用時，可以使用 Vuex，它是一個專為 Vue.js 應用程式開發的狀態管理模式。可以在任何組件中訪問和修改 Vuex 存儲的數據，通過 mutations 來修改狀態，通過 actions 來觸發 mutations。這種方式可以方便地在不同的組件中進行狀態管理和數據共用。

在 store.js 中定義一個 Vuex store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    dataC: 'data from Vuex',
  },
  mutations: {
    updateDataC(state, payload) {
      state.dataC = payload;
    },
  },
});

export default store;

子組件 A 中的代碼：

<template>
  <div>
    <button @click="sendDataToSibling">Send Data To Sibling</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['updateDataC']),
    sendDataToSibling() {
      this.updateDataC('data from child a');
    },
  },
};
</script>

子組件 B 中的代碼：

<template>
  <div>
    {{ dataC }}
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['dataC']),
  },
};
</script>
  • 7、父子組件傳值，使用 $attrs 和 $listeners：

$attrs 是一個包含了父組件傳遞給子組件的所有屬性的對象，可以在子組件中通過訪問 $attrs 來獲取這些屬性。如果不希望某些屬性傳遞到子組件中，可以在子組件中使用 v-bind="$attrs" 並指定排除的屬性名稱，或者在父組件中使用 .sync 修飾符，將屬性綁定到子組件的一個名為 $attrs 的屬性上。

$listeners 是一個包含了父組件傳遞給子組件的所有事件監聽器的對象，可以在子組件中通過訪問 $listeners 來獲取這些事件監聽器。如果需要在子組件中監聽某個事件，可以使用 v-on="$listeners" 將所有的事件監聽器綁定到子組件上。

$attrs 和 $listeners 是常用的兩個特殊屬性，它們可以用來向組件傳遞屬性和事件監聽器。假設我們有一個父組件和一個子組件，子組件需要接收父組件的一些屬性和事件監聽器，同時還需要把這些屬性和事件傳遞給子組件的某個子元素。

父組件中的代碼：

<template>
  <div>
    <child-component :title="title" v-on:click="handleClick" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      title: 'Hello World',
    };
  },
  methods: {
    handleClick() {
      console.log('Button Clicked');
    },
  },
};
</script>

子組件中的代碼：

<template>
  <div>
    <button @click="$emit('click')">Click me</button>
    <div v-bind="$attrs">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  mounted() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  },
};
</script>

在子組件中，我們使用 v-bind="$attrs" 把所有父組件傳遞過來的屬性綁定到子元素上。同時，我們使用 $emit('click') 來觸發父組件傳遞過來的點擊事件。

在子組件 中，需要設置 inheritAttrs: false，來禁止自動將父組件傳遞的屬性綁定到子組件的根元素上。這樣，我們就可以使用 v-bind="$attrs" 把所有屬性綁定到子元素上。

在 mounted 鉤子中，我們可以通過 this.$attrs 和 this.$listeners 來分別訪問所有屬性和事件監聽器。這樣，我們就可以在子組件中使用這些屬性和事件了。

  • 8、使用 $refs：可以使用 Vue 提供的 $refs 屬性來獲取組件實例，然後通過調用組件的方法來進行數據傳遞。這種方式不推薦使用，因為不易維護和調試。

  • 9、使用事件匯流排庫：可以使用 Vue.js 的第三方庫如 Event Bus、Tiny-Emmiter 等來傳遞數據。這些庫提供了一種方便、簡單的方式來在不同的組件之間進行事件傳遞。但是需要註意，使用第三方庫可能會增加項目的複雜性和維護成本。

三、Vue 3 組件之間傳值示例代碼

  • 1、Props

Props 是一種在組件之間傳遞數據的方式，通過在組件標簽上使用屬性綁定，父組件可以向子組件傳遞數據。在子組件中，通過在 props 中定義對應的屬性名，可以獲取到父組件傳遞過來的數據。

例如，父組件中的模板：

<template>
  <child-component :message="hello"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello from parent!'
    };
  }
};
</script>

子組件中的模板：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>
  • 2、$emit 

$emit  是一種在子組件中觸發事件的方式，通過在子組件中使用 $emit 方法，可以向父組件發送數據。在父組件中，通過在子組件標簽上使用 v-on 或 @ 語法，可以監聽子組件觸發的事件，並獲取子組件發送的數據。

例如，子組件中的模板：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    }
  }
};
</script>

父組件中的模板：

<template>
  <child-component @message-sent="receiveMessage"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
};
</script>
  • 3、Provide/Inject

Provide/Inject 是一種在祖先組件和後代組件之間共用數據的方式。通過在祖先組件中使用 provide 方法提供數據，在後代組件中使用 inject 方法獲取數據。

例如，祖先組件中的模板：

<template>
  <child-component></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor!'
    };
  }
};
</script>

後代組件中的模板：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>
  • 4、$attrs 和 $listeners

$attrs 和 $listeners 是在 Vue 2 中引入的特性，但在 Vue 3 中也得到了支持。

例如，父組件中的模板：

<template>
  <child-component message="Hello from parent!" @click="handleClick"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  }
};
</script>

子組件中的模板：

<template>
  <div v-bind="$attrs" v-on="$listeners">{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>
  • 5、provide/inject 與 props 的結合使用

在 Vue 3 中，provide 和 inject 可以與 props 結合使用，從而實現一種高級的數據傳遞方式。具體做法是，在祖先組件中使用 provide 方法提供數據，併在後代組件中使用 inject 方法獲取數據；同時，在後代組件中，可以在 props 中聲明和接收數據，從而實現數據的類型檢查和預設值設定。

例如，祖先組件中的模板：

<template>
  <child-component></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor!'
    };
  }
};
</script>

後代組件中的模板：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
  props: {
    message: {
      type: String,
      default: 'Hello from default!'
    }
  }
};
</script>

在上面的例子中，子組件會首先從祖先組件中獲取名為 message 的數據，如果沒有提供，則使用預設值 Hello from default!。在子組件中，props 會覆蓋 provide/inject，因此如果父組件和子組件都提供了同一個屬性，子組件中的 props 值會覆蓋 provide/inject 中的值。

  • 6、Vuex

Vuex 是一種專門用於管理應用程式狀態的庫，可以用於跨組件傳遞數據。在 Vuex 中，可以定義一個全局的狀態管理器，所有的組件都可以通過 getter 和 setter 方法訪問和修改這個狀態管理器中的數據。

例如，定義一個 Vuex store：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    message: 'Hello from store!'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});

export default store;

在組件中使用 Vuex：

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update message</button>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getMessage'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
};
</script>

在這個例子中，組件通過 mapGetters 方法將 Vuex store 中的 getMessage 方法映射為組件中的計算屬性，從而獲取 Vuex store 中的數據；同時，通過 mapMutations 方法將 Vuex store 中的 updateMessage 方法映射為組件中的方法，從而修改 Vuex store 中的數據。

  • 7、EventBus

EventBus 是一種自定義事件匯流排，可以用於在任意組件之間傳遞數據。在 EventBus 中，可以定義一個全局的事件中心，所有的組件都可以通過 $on 和 $emit 方法監聽和觸發自定義事件。

例如，定義一個 EventBus：

import mitt from 'mitt';

const bus = mitt();

export default bus;

在組件中使用 EventBus：

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update message</button>
</template>

<script>
import bus from './event-bus';

export default {
  data() {
    return {
      message: 'Hello from component!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'New message!';
      bus.emit('message-updated', this.message);
    }
  },
  created() {
    bus.on('message-updated', message => {
      console.log(message);
    });
  }
};
</script>

在這個例子中，組件中的 updateMessage 方法通過 EventBus 的 emit 方法觸發了一個名為 message-updated 的自定義事件，並將修改後的消息作為參數傳遞給事件處理函數；同時，在組件的 created 生命周期鉤子中，通過 EventBus 的 on 方法監聽名為 message-updated 的自定義事件，併在事件處理函數中列印接收到的消息。

 

總之，Vue 3 中組件之間傳值的方式很多，可以根據具體的場景選擇最適合的方式。使用 props 和 $emit 可以實現父子組件之間的傳值，使用 provide 和 inject 可以實現祖先組件向後代組件的傳值，使用 Vuex 和 EventBus 可以實現任意組件之間的傳值。在選擇組件傳值方式時，還應該考慮數據的安全性、可維護性和性能等因素。

四、Vue 2 和 Vue 3 組件之間傳值的區別

Vue 2 和 Vue 3 之間在組件之間傳遞值的方法有一些不同之處。下麵是一些主要的區別：

  1. Props

在 Vue 2 中，父組件通過 props 把數據傳遞給子組件。子組件可以在 props 選項中聲明它們需要的 props，然後在組件的模板中使用它們。

在 Vue 3 中，props 的使用與 Vue 2 類似，但有一些重要的變化。首先，props 的聲明方式已經發生了變化，現在使用 ES6 的解構語法來聲明。其次，Vue 3 強制 props 的類型檢查，並提供了更多的選項來控制 props 的行為，例如預設值和必需性等。

  1. Emit

在 Vue 2 中，子組件通過 emit 向父組件發送消息。子組件可以使用 this.$emit 方法觸發一個自定義事件，並可以傳遞任意數據作為事件的參數。父組件可以監聽子組件觸發的事件，併在事件處理程式中處理傳遞的數據。

在 Vue 3 中，emit 的使用與 Vue 2 相似，但也有一些重要的變化。首先，Vue 3 引入了新的 setup() API，該 API 取代了 Vue 2 中的 created 和 mounted 等生命周期鉤子函數。其次，emit 的使用方式已經改變，現在使用 v-model 代替 this.$emit。v-model 是一個語法糖，允許在父子組件之間雙向綁定數據。

  1. Provide/Inject

在 Vue 2 中，父組件可以通過 provide 方法向子組件傳遞數據，子組件可以使用 inject 方法獲取數據。provide 和 inject 允許在組件樹中的任何地方傳遞數據，而不需要通過 props 一級一級地傳遞。

在 Vue 3 中，provide 和 inject 的使用方式與 Vue 2 相同。但是，Vue 3 提供了新的 reactive 和 readonly 方法，允許在 provide 中提供響應式的數據。這意味著，如果在 provide 中提供的數據發生變化，子組件中使用這些數據的地方也會相應地更新。

 

Vue 3 對於組件之間傳遞值的基本思想與 Vue 2 相似，但是有一些語法和 API 上的改變。這些變化旨在提供更好的類型檢查、更好的性能和更好的開發體驗。

 

作者：yuzhihui

出處：https://www.cnblogs.com/yuzhihui/p/17125771.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！


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

-Advertisement-
Play Games
更多相關文章
  • 國際財務系統基於ShardingSphere的數據分片和一主多從實踐
    作者：京東物流 張廣治 1 背景 傳統的將數據集中存儲至單一數據節點的解決方案，在性能和可用性方面已經難於滿足海量數據的場景，系統最大的瓶頸在於單個節點讀寫性能，許多的資源受到單機的限制，例如連接數、網路IO、磁碟IO等，從而導致它的併發能力不高，對於高併發的要求不滿足。 每到月初國際財務系統壓力巨 ...
  • （資料庫系統概論|王珊）第三章關係資料庫標準語言SQL：習題
    pdf下載：密碼7281 專欄目錄首頁：【專欄必讀】（考研覆試）資料庫系統概論第五版（王珊）專欄學習筆記目錄導航及課後習題答案詳解 名詞解釋 視圖：視圖是一個虛表，其本質就是一條SELECT語句，而查詢結果被賦予了一個名字，也即視圖名字。或者說視圖本身不包含任何數據，它只包含映射到基表的一個查詢語句 ...
  • android簡訊資料庫監聽回調多次問題
    原文地址：Jetpack Compose學習(10)——使用Compose物料清單BOM，更好管理依賴版本 - Stars-One的雜貨小窩 本期講解下關於Android推出的BOM來簡化我們添加compose依賴過於繁雜的問題 本系列以往文章請查看此分類鏈接Jetpack compose學習 介紹 ...
  • 鯨鴻動能流量變現服務中國大陸地區測試流程
    一、鯨鴻動能流量變現服務前置說明 1.接入鯨鴻動能平臺的應用需在應用市場上架。 2.與華為聯運的游戲應用和快游戲禁止接入鯨鴻動能以外的其他廣告內容/插件/SDK等。 3.中國大陸地區僅支持企業認證用戶使用流量變現服務。 4.支持的設備限制： 5.媒體接入流程： 二、媒體服務平臺 數據管理 【首頁】或 ...
  • pnpm的基本原理及快速使用
    現在有不少項目都轉向使用了pnpm，它能幫我們節約磁碟空間並提升包的安裝速度，但是也沒有帶來很多使用習慣上的遷移，npm中的命令在pnpm中大多都是能用的，我們可以方便的切換到pnpm中進行開發。為何不嘗試一下呢？本文就介紹了pnpm中基本的原理，很常用的命令，讓你方便快速的瞭解並使用它。 ...
  • 幾行代碼給網站添加暗黑模式
    很多網站都需要添加暗黑模式，怎麼添加呢，有一種簡單的方式 只需在 css 代碼中添加這麼一句 html[theme="dark-mode"] { filter: invert(1) hue-rotate(180deg); } filter：將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像， ...
  • 記錄--TS類型寫不好？一起來訓練提升吧！
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前期準備 本篇文章的編寫目的是為了提升TS類型的書寫質量，高質量的類型可以提高項目的可維護性並避免一些潛在的漏洞; 在學習本篇之前需要有一定的TS基礎知識，在此基礎上可以更好的完成各種類型的挑戰，編寫出屬於自己的類型工具； 這裡推薦我之前 ...
  • react 高效高質量搭建後臺系統 系列 —— 前端許可權
    其他章節請看： react 高效高質量搭建後臺系統 系列 許可權 本系列已近尾聲，許可權是後臺系統必不可少的一部分，本篇首先分析spug項目中許可權的實現，最後在將許可權加入到我們的項目中來。 spug 中許可權的分析 許可權示例 比如我要將應用發佈模塊的查看許可權分給某用戶（例如 pjl），可以這樣操作： 在角 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類