vue 구성 요소에 정의된 구성 요소에 액세스할 수 없습니다.

Vue 개발에서는 일반적으로 재사용 가능한 일부 기능을 캡슐화하기 위해 구성 요소를 사용합니다. 때로는 구성 요소 내에 정의된 구성 요소에 액세스할 수 없는 상황이 발생할 수 있으며, 이로 인해 종종 문제가 발생합니다. 이 문서에서는 Vue 구성 요소에 정의된 구성 요소에 액세스할 수 없는 이유와 이 문제를 해결하는 방법을 자세히 설명합니다.

1. Reason

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);

이때, 하위 구성요소에 접근할 수 없음을 나타내는 undefound가 출력됩니다. 하위 구성 요소는 상위 구성 요소 범위 내에서만 인식 및 액세스할 수 있고 하위 구성 요소는 전역 범위에 노출되지 않기 때문입니다.

2. 해결책

그렇다면 상위 구성 요소에 정의된 구성 요소를 구성 요소 외부에서 액세스할 수 있게 만드는 방법은 무엇일까요? 다음은 두 가지 가능한 방법입니다:

2.1 $refs 사용

Vue 구성 요소에는 구성 요소 또는 DOM 요소에 액세스하는 데 사용할 수 있는 고유 식별자 $refs가 있습니다. 따라서 상위 구성 요소의 $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>

위 코드에서는 하위 구성 요소에 ref 속성을 추가합니다. 상위 구성 요소의 $refs 속성에 마운트됩니다. 그런 다음 상위 구성 요소의 click 이벤트에서 $refs.childComponent를 통해 하위 구성 요소 객체에 액세스하고 $children 속성을 통해 하위 구성 요소 객체 내부의 구성 요소를 얻습니다.

2.2 믹스인 사용

Vue는 $refs 외에도 믹스인(mix-in) 개념도 제공합니다. 믹스인은 구성 요소에 대한 몇 가지 공통 논리 또는 코드 조각을 제공하여 코드 재사용성을 향상시킬 수 있습니다. 따라서 믹스인을 통해 하위 구성요소 내부의 구성요소를 상위 구성요소에 노출할 수 있습니다.

위 예제 코드를 수정하고, 하위 구성 요소에 믹스인을 정의하고, 하위 구성 요소 내부의 구성 요소를 믹스인의 전역 범위에 노출합니다.

// 父组件
<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>

위 코드에서는 다음을 사용하여 하위 구성 요소에 믹스인을 정의합니다. 하위 구성 요소 내부의 구성 요소를 전역 범위로 확장합니다. 구체적으로, SubComponent 객체를 상수로 정의하고 생성된 믹스인 후크에 있는 전역 범위의 $SubComponent 속성에 마운트합니다. 그런 다음 상위 구성 요소에서 window.$SubComponent를 통해 하위 구성 요소 내부의 구성 요소에 액세스할 수 있습니다.

3. Summary

위는 Vue 컴포넌트에 정의된 접근 불가능한 컴포넌트 문제를 해결하기 위한 두 가지 방법으로, $refs와 mixin을 사용하는 것입니다. $refs는 상위 구성 요소의 하위 구성 요소 내부에 있는 구성 요소에 직접 액세스하는 데 적합하고, mixin은 하위 구성 요소 내부의 구성 요소를 전역 범위에 노출하는 데 적합합니다. 특정 요구 사항의 경우 실제 상황에 따라 적절한 솔루션을 선택할 수 있습니다.

위 내용은 vue 구성 요소에 정의된 구성 요소에 액세스할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!