ref は vue のインスタンスを取得できますか?インスタンスにアクセスするためのいくつかの方法-フロントエンドQ&A-php.cn

ref は vue のインスタンスを取得できますか?インスタンスにアクセスするためのいくつかの方法

PHPz

リリース： 2023-04-11 15:49:22

オリジナル

638 人が閲覧しました

Vue では、コンポーネントインスタンスは Vue インスタンスによって作成されます。コンポーネントでは、 ref を使用して DOM 要素またはコンポーネントインスタンスへの参照を取得できます。では、ref を使用して Vue インスタンスを取得できますか?

簡単に言えば答えはノーです。 Vue インスタンスは DOM 要素やコンポーネントではなく、JavaScript オブジェクトであるためです。 Vue インスタンスは最終的にページ上に DOM 要素としてレンダリングされますが、コンポーネント内で ref を使用すると、DOM 要素またはコンポーネントインスタンスへの参照のみを取得でき、Vue インスタンスを直接取得することはできません。

それでは、Vue インスタンスにアクセスする必要がある場合はどうすればよいでしょうか?一般的な方法をいくつか示します。

Vue.mixin を使用してグローバルにミックスする

Vue.mixin を使用してグローバルにミックスし、オブジェクトをすべての Vue コンポーネントにミックスできます。 mixin オブジェクトでは、作成された (または他のライフサイクルフック関数) を定義でき、これを通じて Vue インスタンスにアクセスできます。サンプルコードは以下のとおりです。

// mixin.js 
export default { 
  created() { 
    console.log('Vue instance:', this.$root); 
  } 
} 
// main.js 
import Vue from 'vue'; 
import App from './App.vue'; 
import mixin from './mixin'; 

Vue.mixin(mixin); 

new Vue({ 
  render: h => h(App), 
}).$mount('#app');

ログイン後にコピー

作成したフック関数は、コンポーネント作成時にVueインスタンスを出力するためにmixin.js内に定義されています。 main.js では、ミックスインをグローバルに適用します。

$root を使用して Vue インスタンスにアクセスする

前述したように、Vue インスタンスには this.$root を通じてアクセスできます。コンポーネントでは、this.$root を通じて Vue インスタンスを取得することもできます。コンポーネント内で this.$root を使用して Vue インスタンスにアクセスする場合は、Vue インスタンスを作成した後に使用しないと、unknown が返されるので注意が必要です。サンプルコードは次のとおりです。

<template> 
  <div> 
    <p>Using $root to access Vue instance:</p> 
    <button @click="logVueInstance">Log Vue Instance</button> 
  </div> 
</template> 

<script> 
  export default { 
    methods: { 
      logVueInstance() { 
        console.log('Vue instance:', this.$root); 
      } 
    } 
  } 
</script>

ログイン後にコピー

は、ボタンがクリックされたときに Vue インスタンスを出力するメソッドをコンポーネント内に定義します。

$parent を使用して Vue インスタンスにアクセスする

$root を使用することに加えて、$parent を通じて親コンポーネントの Vue インスタンスにアクセスすることもできます。親コンポーネントはルートコンポーネントであり、Vue インスタンス全体です。 $parent アクセスを使用する前に親コンポーネントを作成しておく必要があることに注意することも重要です。サンプルコードは次のとおりです:

<template> 
  <div> 
    <p>Using $parent to access Vue instance:</p> 
    <button @click="logVueInstance">Log Vue Instance</button> 
  </div> 
</template> 

<script> 
  export default { 
    methods: { 
      logVueInstance() { 
        console.log('Vue instance:', this.$parent.$root); 
      } 
    } 
  } 
</script>

ログイン後にコピー

はコンポーネント内のメソッドを定義しており、ボタンをクリックすると、$parent を通じて親コンポーネントの Vue インスタンスにアクセスし、出力します。

要約すると、ref を通じて Vue インスタンスに直接アクセスすることはできませんが、Vue.mixin、$root、$parent およびその他のメソッドを使用してコンポーネント内の Vue インスタンスにアクセスできます。

以上がref は vue のインスタンスを取得できますか?インスタンスにアクセスするためのいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。