vue コンポーネントで定義されたコンポーネントにはアクセスできません

Vue 開発では、通常、コンポーネントを使用していくつかの再利用可能な関数をカプセル化します。コンポーネント内で定義されたコンポーネントにアクセスできない状況に遭遇することがあります。これにより、問題が発生することがよくあります。この記事では、Vue コンポーネントで定義されたコンポーネントにアクセスできない理由と、この問題を解決する方法について詳しく説明します。

1. 理由

Vue コンポーネントのデータ、メソッド、ライフサイクル フックなどはすべてコンポーネントのスコープ内にカプセル化されており、定義されたコンポーネントについても同様です。コンポーネント内で。したがって、コンポーネント内で定義されたコンポーネントには、コンポーネントの外部から直接アクセスすることはできません。

たとえば、次の例では、親コンポーネントと子コンポーネントを定義し、親コンポーネントに子コンポーネントを導入します。

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  }
}
</script>

// 子组件
<template>
  <h1>这是子组件</h1>
</template>

<script>
export default {
  name: 'ChildComponent',
}
</script>

ただし、子コンポーネントのすぐ外側にある場合は、サブコンポーネントにアクセスします。例:

console.log(ChildComponent);

この時点では、サブコンポーネントにアクセスできないことを示す未定義が出力されます。これは、子コンポーネントは親コンポーネントのスコープ内でのみ認識およびアクセスでき、子コンポーネントはグローバル スコープには公開されないためです。

2. 解決策

それでは、親コンポーネントで定義されたコンポーネントにコンポーネントの外部からアクセスできるようにするにはどうすればよいでしょうか?

2.1. $refs の使用

Vue コンポーネントでは、各コンポーネントには一意の識別子 $refs があり、これを使用してコンポーネントまたは DOM 要素にアクセスできます。したがって、親コンポーネントの $refs を通じて子コンポーネントを取得し、子コンポーネント内のコンポーネントにアクセスできます。

上記のコード例を変更し、親コンポーネントにボタンを追加し、ボタンのクリック イベントの $refs を通じてサブコンポーネントにアクセスします。

// 父组件
<template>
  <div>
    <child-component></child-component>
    <button @click="accessChildComponent">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  },
  methods: {
    accessChildComponent() {
      console.log(this.$refs.childComponent.$children) // 访问子组件内部组件
    }
  }
}
</script>

// 子组件
<template>
  <div ref="childComponent">
    <h1>这是子组件</h1>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  components: {
    SubComponent: {
      name: 'SubComponent',
      template: '<div>这是子组件内部组件</div>'
    }
  }
}
</script>

上記のコードに、Add a ref を追加します。属性を追加して、親コンポーネントの $refs 属性にマウントします。次に、親コンポーネントのクリック イベントで、$refs.childComponent を通じて子コンポーネント オブジェクトにアクセスし、$children プロパティを通じて子コンポーネント オブジェクト内のコンポーネントを取得します。

2.2. ミックスインの使用

$refs に加えて、Vue はミックスイン (ミックスイン) の概念も提供します。ミックスインはコンポーネントに共通のロジックやコード スニペットを提供できるため、コードの再利用性が向上します。したがって、子コンポーネント内のコンポーネントをミックスインを通じて親コンポーネントに公開できます。

上記のコード例を変更し、サブコンポーネントでミックスインを定義し、サブコンポーネント内のコンポーネントをミックスインのグローバル スコープに公開します。

// 父组件
<template>
  <div>
    <button @click="accessChildComponent">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  },
  methods: {
    accessChildComponent() {
      console.log(window.$SubComponent) // 访问子组件内部组件
    }
  }
}
</script>

// 子组件
<template>
  <h1>这是子组件</h1>
</template>

<script>
const SubComponent = {
  name: 'SubComponent',
  template: '<div>这是子组件内部组件</div>'
}

export default {
  name: 'ChildComponent',
  mixins: [{
    created() {
      window.$SubComponent = SubComponent
    }
  }]
}
</script>

上記のコードでは、A ミックスインはコンポーネント内で定義され、サブコンポーネント内のコンポーネントをグローバル スコープに公開します。具体的には、SubComponent オブジェクトを定数として定義し、作成されたミックスインのフック内のグローバル スコープの $SubComponent プロパティにマウントします。次に、親コンポーネントで、window.$SubComponent を通じてサブコンポーネント内のコンポーネントにアクセスできます。

3. 概要

上記は、Vue コンポーネントで定義されたコンポーネントにアクセスできない問題を解決する 2 つの方法であり、$refs と mixin を使用します。 $refs は、親コンポーネント内の子コンポーネント内のコンポーネントに直接アクセスするのに適していますが、mixin は、子コンポーネント内のコンポーネントをグローバル スコープに公開するのに適しています。特定のニーズに対しては、実際の状況に基づいて適切なソリューションを選択できます。

以上がvue コンポーネントで定義されたコンポーネントにはアクセスできませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。