vue はコンポーネント インスタンスを取得します

vue はコンポーネント インスタンスを取得します

オプションでコンポーネントインスタンスを取得します

オプション式では、thisを通じてコン​​ポーネント インスタンスを直接取得し、を通じてthisインスタンス オブジェクトのさまざまなメソッドにアクセスできます。

//该组件实例管理的 DOM 根节点。
this.$el
//表示组件当前已解析的 props 对象。
this.$props
//数据
this.$data
//父组件实例
this.$parent
//根组件实例
this.$root
//插槽对象
this.$slots
//一个包含 DOM 元素和组件实例的对象
this.$refs
//其他属性:https://cn.vuejs.org/api/component-instance.html

組み合わせからコンポーネントインスタンスを取得

併用の場合、setup関数内にコードを記述します。コンポーネントインスタンスは取得できません。メソッドthisを使用する必要があります。取得されるインスタンスオブジェクトは、オプションのコンポーネントインスタンスとは異なります。getCurrentInstance()getCurrentInstance()

<script lang='ts'>
import {
      
       defineComponent,getCurrentInstance} from 'vue';
export default defineComponent({
      
      
    setup(props, {
       
        attrs, slots, emit, expose }) {
      
      
        const instance = getCurrentInstance()
    }
})
</script>

オプションの式と同じ $ を含むインスタンス オブジェクト

オプション式のインスタンスの属性にはすべて$シンボルが含まれています。複合式では、proxyこのオブジェクトを使用してオプション式のインスタンスを取得する必要があります。つまり、オプション式のインスタンス オブジェクトは、proxy複合式 .variable 内の複合インスタンス オブジェクト

const instance = getCurrentInstance()
const proxy = instance.proxy

//该组件实例管理的 DOM 根节点。
proxy.$el
//表示组件当前已解析的 props 对象。
proxy.$props
//数据
proxy.$data
//父组件实例
proxy.$parent
//根组件实例
proxy.$root
//插槽对象
proxy.$slots
//一个包含 DOM 元素和组件实例的对象
proxy.$refs
//其他属性:https://cn.vuejs.org/api/component-instance.html

//true
console.log(instance.parent.proxy == instance.proxy.$parent);

インスタンスオブジェクトのctx属性の問題

組み合わせ中のインスタンスのctx属性は本番環境では取得できないため、コンテキストオブジェクトを取得したい場合はsetup関数内で取得する必要があります。

間違ったアプローチ

//开发环境能获取，但在生产中ctx为空
const {
    
     ctx } = getCurrentInstance()   //×

正しいアプローチ

setup(props,ctx){
    
    }

getCurrentInstance は非パブリック API としてマークされています

https://github.com/vuejs/docs/issues/1422、getCurrentInstance非公開 API ではありますが、内部インスタンスであるため、vue コンポーネント ライブラリを開発するときに引き続き使用できます。

getCurrentInstance()このメソッドは内部メソッドであるため、Vue の公式ドキュメントには見つかりません。

これは、インスタンスが非パブリック API を公開する内部インスタンスであるためです。そのインスタンスから使用するものはすべて、サーバー制約の影響を受けないため、技術的にはどのリリース タイプ間でも中断できます。

ネストされたコンポーザブルにセットアップ コンテキストが必要な理由はわかりませんが、コンポーザブルに引数を明示的に渡すと、使用するコンポーネントとの結合が少なくなり、単独での理解とテストが容易になります。

一般に、Composition API で動作するように設計されたライブラリは、ユーザーがインスタンスから変数を取得するのではなく、独自のコンポーザブル (例: useRoutefrom ) を介して特別な変数を公開する必要があります。vue-router