値を渡すvue3親コンポーネントサブアセンブリを提供＆注入

入門

• provide()そして、inject()データ転送は、ネストされたコンポーネント間で達成することができます。
• これらの2つの関数は、唯一の可能setup()関数を使用します。
• 使用した親コンポーネントprovide()データをダウン渡す機能。
• 子コンポーネントを用いるinject()上位レイヤ上のデータ転送を得ました。
• 任意のレベル

簡単な例で見てみましょう。

親コンポーネント

<template>
  <div>
    <provideAndInject />
  </div>
</template>

<script>
import { provide } from "@vue/composition-api";  // 父组件引入 provide
import provideAndInject from "./components/provideAndInject";  // 引入子组件

export default {
  name: "app",
  components: {
    provideAndInject
  },
  setup() {
    // provide('数据名称', 要传递的数据)
    provide("customVal", "我是父组件向子组件传递的值"); 
  }
};
</script>

サブコンポーネント

<template>
  <div>
    <h3>{{ customVal }}</h3>
  </div>
</template>

<script>
// 子组件导入 inject
import { inject } from "@vue/composition-api";

export default {
  setup() {
    //调用 inject 函数，通过指定的数据名称，获取到父级共享的数据
    const customVal = inject("customVal");

    return {
      customVal
    };
  }
};
</script>

サプリメント

親コンポーネントができますref作成応答データを経由provide共有サブアセンブリ