Vue에서 $refs 사용 및 주의사항

Vue에서 $refs 사용 및 주의사항

Vue에서 $refs는 구성 요소 또는 요소에 대한 참조에 액세스하는 데 사용되는 특수 속성입니다. $refs를 통해 DOM 요소나 하위 구성 요소의 인스턴스를 쉽게 얻을 수 있고, 작동하고 상호 작용할 수 있습니다. 이 기사에서는 $refs의 사용법을 소개하고 주의해야 할 몇 가지 사항을 제공합니다.

1. $refs

1. 를 사용하여 DOM 요소의 참조를 가져옵니다

템플릿에서 DOM 요소에 ref 속성을 추가하면 $refs를 통해 DOM 요소의 참조를 가져올 수 있습니다. 예:

<template>
  <div>
    <input ref="inputElement" type="text" />
    <button @click="focusInput">获取焦点</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputElement.focus();
    }
  }
};
</script>

위의 예에서 ref 속성은 입력 요소에 추가되고 이름은 "inputElement"입니다. this.$refs.inputElement를 통해 DOM 요소에 대한 참조를 얻을 수 있으며, 이후 해당 focus 메소드를 호출하여 포커스를 얻습니다.

2. 하위 구성 요소의 참조 가져오기

마찬가지로 $refs를 통해 하위 구성 요소의 참조를 가져오고 하위 구성 요소의 메서드를 호출하거나 해당 속성에 액세스할 수도 있습니다. 예:

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

위의 예에서는 ChildComponent라는 하위 구성 요소를 도입하여 템플릿에 사용했습니다. 자식 구성 요소에 ref 속성을 추가하고 이름을 "childComponent"로 지정하면 this.$refs.childComponent를 통해 자식 구성 요소에 대한 참조를 얻고 해당 childMethod 메서드를 호출할 수 있습니다.

2. Notes

1. $refs 업데이트 타이밍

$refs는 Vue 인스턴스가 렌더링된 후에 획득된다는 점에 유의해야 합니다. 이는 Vue 인스턴스에서 생성된 라이프사이클 후크 기능에서 $refs를 올바르게 얻을 수 없음을 의미합니다. 생성된 $refs를 사용해야 하는 경우 nextTick 함수를 통해 실행을 지연할 수 있습니다.

created() {
  this.$nextTick(() => {
    // 在这里可以正确获取到$refs
  });
}

2. $refs

$refs의 동적 업데이트는 구성 요소 인스턴스의 렌더링 프로세스 중에만 설정 및 업데이트됩니다. 따라서 템플릿에서 v-if 또는 v-for를 사용하여 동적으로 생성된 DOM 요소는 통과될 수 없습니다. $ 심판으로부터 획득함. $refs를 동적으로 업데이트해야 하는 경우 key 속성을 사용할 수 있습니다.

<template>
  <div>
    <child-component v-if="showChild" :key="uniqueKey" ref="childComponent"></child-component>
    <button @click="toggleChild">切换子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: true,
      uniqueKey: 0
    };
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild;
      this.uniqueKey += 1;
    },
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

위의 예에서 하위 구성 요소에 키 속성을 추가하고 이를 UniqueKey 변수에 바인딩하면 하위 구성 요소를 전환할 때 $refs의 동적 업데이트가 트리거될 수 있습니다.

3. 요약

$refs는 Vue의 매우 실용적인 기능으로, DOM 요소 또는 하위 구성 요소에 대한 참조를 쉽게 얻고 작동하고 상호 작용할 수 있습니다. $refs를 사용할 때는 업데이트 타이밍과 동적 업데이트 방법에 주의해야 합니다. 이 글의 소개가 Vue의 $refs 기능을 더 잘 사용하고 이해하는 데 도움이 되기를 바랍니다.

위 내용은 Vue에서 $refs 사용 및 주의사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!