要素とコンポーネントにアクセスする Vue のメソッド (例付き)

この記事の内容は、Vue で要素やコンポーネントにアクセスする方法 (例付き) に関するものであり、一定の参考価値があります。必要な友人は参考にしていただければ幸いです。

ルート インスタンスへのアクセス

新しい各 Vue インスタンスのサブコンポーネントでは、$root 属性を通じてそのルート インスタンスにアクセスできます。
例:

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

すべてのサブコンポーネントは、このインスタンスにアクセスしたり、グローバル ストアとしてこのインスタンスを使用したりできます。

/ 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()

注:
これは、デモやコンポーネント数が少ない非常に小規模なアプリケーションに便利です。ただし、このモデルは中規模および大規模なアプリケーションには適していません。したがって、ほとんどの場合、アプリケーションの状態を管理するために Vuex を使用することを強くお勧めします。

親コンポーネントのインスタンスへのアクセス

$root と同様に、$parent プロパティを使用して、子コンポーネントから親コンポーネントのインスタンスにアクセスできます。これにより、データを props の形式で子コンポーネントに渡すのではなく、後からいつでも親コンポーネントにアクセスできる機会が提供されます。
注:

在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

## サブコンポーネントのインスタンスまたはサブ要素へのアクセス
##プロパティやイベントが存在するにもかかわらず、JavaScript でサブコンポーネントに直接アクセスする必要がある場合があります。これを実現するには、ref 属性を通じて ID 参照をサブコンポーネントに割り当てます。例:

<base-input ref="usernameInput"></base-input>

この ref を定義したコンポーネントで、緊急時にこの インスタンスにアクセスするために:

this.$refs.usernameInput

を使用できます。
ref を v-for とともに使用すると、取得する参照は、対応するデータ ソースのこれらのサブコンポーネントを含む配列になります。
注:

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

Dependency Injection

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

このコンポーネントでは、どのマップと対話するかを知るために、 のすべての子孫が getMap メソッドにアクセスする必要があります。残念ながら、$parent 属性を使用すると、より深くネストされたコンポーネントにはうまく対応できません。ここで、provide と inject という 2 つの新しいインスタンス プロパティを使用して、依存関係の注入が登場します。
provide オプションを使用すると、子孫コンポーネントに提供するデータ/メソッドを指定できます。この例では、 内の getMap メソッドです:

provide(){
    return{
        getMap:this.getMap
    }
}

その後、任意の子孫コンポーネントで、inject オプションを使用して、このインスタンスに追加する指定されたコンテンツを受け取ることができます。 :

inject:['getMap']

$parent と比較すると、この使用法では、 インスタンス全体を公開することなく、任意の子孫コンポーネントの getMap にアクセスできます。これにより、サブコンポーネントが依存するものを変更/削除する可能性を心配することなく、コンポーネントの開発をより適切に継続できるようになります。同時に、これらのコンポーネント間のインターフェイスは、props と同様に常に明確に定義されます。
祖先コンポーネントは、自身が提供するプロパティをどの子孫コンポーネントが使用するかを知る必要はありません。
子孫コンポーネントは、挿入されたプロパティがどこから来たのかを知る必要はありません。
注:

ただし、依存関係は注射は依然として悪影響を及ぼします。アプリケーションと現在のコンポーネント構成が結合されるため、リファクタリングがより困難になります。また、提供されたプロパティは応答しません。これらを使用して一元化されたスケールのデータを作成することは、これを行うために $root を使用することほど良くないため、これは仕様によるものです。共有したいプロパティが汎用ではなくアプリケーションに固有の場合、または祖先コンポーネントで提供されたデータを更新したい場合は、Vuex 状態管理ソリューションのような実際のプロパティに切り替える必要がある可能性があることを意味します。

この記事はすべてここにあります。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの JavaScript チュートリアル ビデオ 列に注目してください。

以上が要素とコンポーネントにアクセスする Vue のメソッド (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。