VUE 3ガイド(10)-提供と注入

4252 ワード
vue テキストリンク
提供と注入
親コンポーネントは、14～16号線のように設定できます.オブジェクトまたはオブジェクトは、提供(提供)するプロパティを入力するだけで関数を返すように設定できます.
<div id="app">
  <child />
</div>

<script>
var child = {
  inject : ['my'],   // 여기가 inject
  template: `<div>I am {{ my.age }} years old.</div>`
}
new Vue({
  el: "#app",
  components: { child },
  provide () {   // 여기가 provide
    const my = {}
    Object.defineProperty(my, 'age', {
       enumerable: true,
       get: () => this.age,
    })
    return { my }
  },
  data: () => ({ age: 20 })
})
</script>
サブエレメントは、ローカル変数として使用するために、7行目のように、注入(inject)したい属性名を配列形式で記入することができる.
上の図に示すように、親コンポーネントはprovideを定義します.そしてその下のすべて
コンポーネントはinjectで定義された提供を使用できます.
デフォルトでは、供給/注入は反応型(not reactive)をサポートしません.しかし、反応型を実現する方法がある.親がプロパティを提供する場合は、監視中のオブジェクトを渡すだけです.
Android宣言権限
Spring Boot + Vue.js掲示板(2)-プロジェクトの作成、DBの作成、接続