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 형식으로 하위 구성 요소에 데이터를 전달하는 대신 나중에 언제든지 상위 구성 요소에 접근할 수 있는 기회를 제공합니다.
참고:

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

## 하위 구성 요소 인스턴스 또는 하위 요소에 액세스 ##
props와 이벤트가 있음에도 불구하고 때로는 Javascript에서 직접 하위 구성 요소에 액세스해야 할 수도 있습니다. 이를 달성하려면 ref 속성을 통해 하위 구성 요소에 ID 참조를 할당할 수 있습니다. 예:

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

이제 이 참조를 정의한 구성 요소에서

this.$refs.usernameInput

를 사용하여 긴급 상황에 대비해 이 인스턴스에 액세스할 수 있습니다.
ref를 v-for와 함께 사용하면 얻는 참조는 해당 데이터 소스의 이러한 하위 구성 요소를 포함하는 배열이 됩니다.
참고:

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

종속성 주입

<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 옵션을 사용하면 하위 구성 요소에 제공하려는 데이터/방법을 지정할 수 있습니다. 이 예에서는 내의 getMap 메소드입니다.

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

그런 다음 모든 하위 구성요소에서 삽입 옵션을 사용하여 이 인스턴스에 추가하려는 지정된 속성을 수신할 수 있습니다.

inject:['getMap']

비교 $parent를 사용하면 전체 인스턴스를 노출하지 않고도 모든 하위 구성요소의 getMap에 액세스할 수 있습니다. 이를 통해 하위 구성 요소가 의존하는 항목을 변경/제거할 수 있다는 걱정 없이 구성 요소 개발을 더 잘 계속할 수 있습니다. 동시에 이러한 구성 요소 간의 인터페이스는 소품처럼 항상 명확하게 정의됩니다.
상위 구성 요소는 자신이 제공하는 속성을 사용하는 하위 구성 요소를 알 필요가 없습니다.
하위 구성 요소는 주입된 속성이 어디에서 왔는지 알 필요가 없습니다.
참고:

그러나 종속성 주입은 여전히 ​​부정적인 영향을 미칩니다. 이는 애플리케이션을 현재 구성 요소 조직과 결합하여 리팩토링을 더욱 어렵게 만듭니다. 또한 제공된 속성은 응답하지 않습니다. 이는 의도적으로 설계된 것입니다. 중앙 집중식 데이터 규모를 생성하기 위해 이를 사용하는 것이 $root를 사용하는 것만큼 좋지 않기 때문입니다. 공유하려는 속성이 일반이 아닌 애플리케이션에만 해당되거나 상위 구성 요소에서 제공된 데이터를 업데이트하려는 경우 Vuex 상태 관리 솔루션과 같은 실제 속성으로 전환해야 할 수도 있습니다.

이 기사는 여기까지입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 JavaScript Tutorial Video 칼럼을 주목하세요!

위 내용은 Vue의 요소 및 구성 요소에 액세스하는 방법(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!