Context API 允許跨元件傳遞數據，透過定義一個提供者元件來提供數據，然後使用 inject() 函數在後代元件中存取它。具體步驟包括：在提供者元件中使用 provide() 函數定義提供者元件。在需要存取共享資料的元件中使用 inject() 函數注入值。訪問注入的值。
Vue 中使用Context 傳遞值
Context 是Vue.js 生態系統中的一個API，它允許在組件樹中跨組件傳遞資料。它透過在提供者元件中定義一個值，然後在後代元件中透過 inject API 存取該值來實現。
如何使用 Context 傳遞值
建立提供者元件
使用 provide() 函數定義提供者元件。此元件將提供需要共享的資料。
<code class="javascript">import { provide } from 'vue';
export default {
setup() {
provide('myValue', 'Hello World!');
}
}</code>注入值
在需要存取共享資料的元件中，使用 inject() 函數注入值。
<code class="javascript">import { inject } from 'vue';
export default {
setup() {
const myValue = inject('myValue');
return { myValue };
}
}</code>存取注入的值
注入的值現在可以在元件的範本或腳本中存取。
<code class="html"><template>
<h1>{{ myValue }}</h1>
</template></code>範例
考慮一個有父元件和子元件的元件樹。父元件提供一個值 'myValue'，子元件需要存取該值。
父元件(Provider.vue)
<code class="javascript"><script>
import { provide } from 'vue';
export default {
setup() {
provide('myValue', 'Hello World!');
}
}
</script></code>子元件(Consumer.vue)
<code class="javascript"><script>
import { inject } from 'vue';
export default {
setup() {
const myValue = inject('myValue');
return { myValue };
}
</script></code>#結果
當Consumer.vue 渲染時，它將存取父元件提供的'myValue' 值並將其顯示在UI 中。
以上是vue中context如何傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
