Vue での Provide と Inject の使用法

provide と inject は、Vue.js でデータを共有するためのメソッドです。provide() は、親コンポーネントにデータを提供します。 inject() は、親コンポーネントによって提供されたデータを子コンポーネントで取得します。特徴: データは応答性が高く、明示的に props を渡すことなく、オンデマンドで必要な場所に流れます。

Vue.js での提供と注入

質問: Vue 提供とは何ですか。 jsに注入しますか？

回答: provide と inject は、Vue.js の 2 つのグローバル メソッドで、異なるコンポーネント間でデータを共有するために使用されます。

詳細な説明:

provide

## は、子コンポーネントにデータを提供するために親コンポーネントで使用されます。
• 親コンポーネントの setup() メソッドまたは created() メソッドで Provide() メソッドを使用して、データを提供します。
• 使用する構文:
• provide('propertyName', value)

inject

Get を使用する親コンポーネントのデータを子コンポーネントに格納します。
• サブコンポーネントの setup() メソッドで inject() メソッドを使用してデータを取得します。
• 使用する構文:
• const propertyName = inject('propertyName')

使用法:

親コンポーネントで、provide() メソッドを使用してデータを提供します:

1. <code class="javascript">// 父组件
   export default {
     setup() {
       provide('sharedData', {
         message: 'Hello, world!'
       })
     }
   }</code>

子コンポーネントで、inject() メソッドを使用してデータを取得します:

2. <code class="javascript">// 子组件
   export default {
     setup() {
       const sharedData = inject('sharedData')
       console.log(sharedData.message) // 输出: "Hello, world!"
     }
   }</code>

機能:

提供および注入により、データがコンポーネント ツリー内の目的の場所にオンデマンドで流れることができます。

• これらを使用すると、コンポーネント間で props を明示的に渡すことなく、状態、構成項目、またはその他のデータを共有できます。
• 共有データは応答性があり、親コンポーネントで変更されると、子コンポーネントも自動的に更新されます。

以上がVue での Provide と Inject の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。