vue.js에서 $refs 사용에 대한 간단한 토론(코드 포함)

관련 권장 사항: "vue.js Tutorial"

• 설명: vm.$refs는 ref

• 를 등록한 모든 하위 구성 요소(또는 HTML 요소)를 보유하는 개체입니다. HTML 요소에 ref 속성을 추가한 후 JS

• 의 vm.$refs 속성을 통해 가져옵니다. 참고: 하위 구성 요소를 가져오면 ref

를 통해 하위 구성 요소의 데이터와 메서드를 가져올 수 있습니다.

일반적으로 DOM 요소를 얻으려면 document.querySelector(".input1")하여 dom 노드를 얻은 다음 input1의 값을 얻어야 합니다. document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1

하지만 ref로 바인딩한 후에는 dom 노드를 가져올 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.

그런 다음 자바스크립트에서 다음을 호출하세요: this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 소비가 줄어듭니다. 샘플 코드는 다음과 같습니다.

<-- 添加ref属性 -->
<div id="app">
	<input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

// 获取注册过 ref 的所有组件或元素
<script>
    new Vue({
        el: "#app",
        methods:{
        add:function(){
            this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
            }
        }
    })
</script>

더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 vue.js에서 $refs 사용에 대한 간단한 토론(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!