vue의 $refs는 무엇을 의미하나요?
- 青灯夜游원래의
- 2022-12-14 19:27:122396검색
vue에서 $refs는 ref 속성으로 등록된 모든 DOM 요소와 구성 요소 인스턴스를 보유하는 객체입니다. ref는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하는 데 사용됩니다. 참조 정보는 일반 DOM 요소에 사용되는 경우 상위 구성 요소의 "$refs" 개체에 등록됩니다. 하위 구성 요소에서 참조는 구성 요소 인스턴스를 가리킵니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
$refs in Vue
$refs는 ref 속성에 등록된 모든 DOM 요소와 구성 요소 인스턴스를 보유하는 객체입니다.
Description
ref는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하는 데 사용됩니다. 참조 정보는 상위 구성 요소의 $refs 개체에 등록됩니다.
일반 DOM 요소에 사용되는 경우 참조는 DOM 요소입니다.
하위 구성 요소에서 사용되는 경우 참조는 구성 요소 인스턴스를 가리킵니다.
또한 v-for가 요소나 구성 요소에서 사용되는 경우 참조 정보는 다음과 같습니다. DOM 노드나 구성요소 인스턴스를 포함하는 배열입니다. [관련 추천 : vuejs 영상 튜토리얼, web front-end development]
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div ref="node">Node</div>
<layout-div ref="layout"></layout-div>
<div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
Vue.component("layout-div", {
data: function(){
return {
count: 0
}
},
template: `<div>
<div>{{count}}</div>
</div>`
})
var vm = new Vue({
el: '#app',
mounted: function(){
console.log(this.$refs.node); // <div>Node</div> // DOM元素
console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例
console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组
}
})
</script>
</html>ref 자체가 렌더링 결과로 생성되기 때문에 아직 존재하지 않기 때문에 초기 렌더링 시에는 접근이 불가능하며, $refs 아직 존재하지 않으므로 템플릿에서 데이터 바인딩에 사용해서는 안 됩니다. ref에 대한 액세스를 초기화할 때 데이터가 업데이트된 후 마운트된 메서드에서 호출해야 합니다. 콜백 작업은 $nextTick 메서드에 전달되어야 합니다. 또한 요소나 인스턴스를 얻으려면 일반적으로 MVVM의 ViewModel이 DOM을 작동할 수 있도록 데이터 바인딩을 사용하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: function(){
return {
msg: 0
}
},
template: `<div>
<div ref="node">{{msg}}</div>
<button @click="updateMsg">button</button>
</div>`,
beforeMount: function(){
console.log(this.$refs.node); // undefined
},
mounted: function(){
console.log(this.$refs.node); // <div>0</div>
},
methods: {
updateMsg: function(){
this.msg = 1;
console.log(this.$refs.node.innerHTML); // 0
this.$nextTick(() => {
console.log(this.$refs.node.innerHTML); // 1
})
}
}
})
</script>
</html>VUE
ref에서 $refs의 기본 사용법은 세 가지입니다:
1. ref는 this.$refs(참조 값)를 사용하여 얻은 일반 요소에 추가됩니다. 은 dom 요소입니다
2. 하위 구성 요소에 ref를 추가하고this.$refs.(ref value)를 사용하여 구성 요소 인스턴스를 가져오면 구성 요소 의 모든 메서드를 사용할 수 있습니다. 메소드를 사용할 때 this.$refs.(ref value).method()를 직접 사용할 수 있습니다.
3. v-for 및 ref를 사용하여 배열 또는 DOM 노드 세트를 얻는 방법주의해야 할 함정:
1 v-for 순회를 통해 다른 참조를 추가하려면 기억하세요. : 숫자, 즉 :号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））
2、通过 :ref =某变量 添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。:ref = 변수;
를 추가하는 것은 다른 속성인 경우와 동일합니다. ,
: code><p> 기호를 추가할 필요가 없습니다. 변수인 경우 <img alt="" class="has" src="https://img.php.cn/upload/article/000/000/024/0ccbe7fd762ab3db91a6278d0769ee7f-0.png"><code>: 기호를 추가하는 것을 잊지 마세요. (콜론이 있으면 뒤에 오는 것이 변수나 표현식이라는 뜻이고, 콜론이 없으면 해당 문자열 상수(String)를 의미합니다.) 2. :ref = 변수를 통해 추가하세요. > 참조(예: : 번호 추가), 참조를 얻으려면 [0]을 추가해야 합니다(예: ). this.$refs[refsArrayItem ] [0]; :ref = 특정 변수가 아니고 ref = 특정 문자열
this.$refs[refsArrayItem]과 같이 추가할 필요가 없습니다.
1. ref는 dom 렌더링이 완료된 후
이어야 합니다. 사용 시 dom이 렌더링되었는지 확인하세요. 예를 들어, 라이프 사이클
mounted(){} 후크에서
를 호출하거나 this.$nextTick(()=>{})에서
를 호출합니다.
2. ref가 루프아웃되고
에 중복된 이름이 여러 개 있으면 ref의 값은 배열이 됩니다. 이때 단일 ref를 얻으려면 루프만 하면 됩니다.
예 1:ref 속성 추가
<div id="app">
<h1 ref="h1Ele">这是H1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取H1元素</button>
</div>🎜ref🎜methods: {
getref() {
// 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
console.log(this.$refs.h1Ele.innerText);
this.$refs.h1ele.style.color = 'red';// 修改html样式
console.log(this.$refs.ho.msg);// 获取组件数据
console.log(this.$refs.ho.test);// 获取组件的方法
}
}🎜🎜에 등록된 모든 구성 요소 또는 요소 가져오기 예 2:🎜🎜🎜Vue 코드: 🎜 <!-- 列表部分 -->
<el-table @sort-change="sortChange" ref="multipleSelection" border :data="valueDryGoodTableData" style="width: 100%">
<el-table-column align="left" prop="title" label="标题" min-width="80%" sortable="custom">
<template slot-scope="scope">
<a target="_blank" :class="scope.row.titleClicked?'titleClicked':''" class="hoverHand bluetext" v-html="scope.row.title" @click="titleClick(scope.row.articleUrl,scope.$index)">
</a>
</template>
</el-table-column>
<el-table-column align="left" prop="releaseTime" label="发布日期" min-width="11%" sortable="custom"></el-table-column>
<el-table-column align="center" label="操作" min-width="9%">
<template slot-scope="scope">
<span class="operatoryTools">
<i title="取消收藏" v-if="scope.row.isFavour" @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-on"></i>
<i title="收藏" v-else @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-off"></i>
<i title="分享" @click.stop="showShareOperation(scope.$index)" class="shareTarg iconfont"></i>
<div class="share" v-if="scope.row.showShare">
<img class="hoverHand shareItem" title="分享到微博" @click="shareItem('sina',$event);" src="@/images/WEIBO.png">
<img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem('wx',$event);" src="@/images/WEIXIN.png">
<img class="hoverHand shareItem" title="分享到QQ" @click="shareItem('qq',$event);" src="@/images/QQ.png">
</div>
<div v-show="scope.row.erweimaShare" class="erweima_share"></div>
<div v-show="scope.row.erweimaShare1" class="erweima_share1"></div>
</span>
</template>
</el-table-column>
</el-table>🎜JS 코드: 🎜//点击清空条件，调用该方法
emptyAndSearch(){//清空条件方法
//清空树选中状态
this.clearTreeNodeCheck(['tree']);
//清除排序
this.$refs.multipleSelection.clearSort();
//设置分页参数
this.queryParam = {
startRow : 1,
pageSize : 20,
condition:{
}
}
//分页查询调用
this.confirmSearch('statistics');
//设置清空条件为false
this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
}🎜 🎜예 3: 🎜 🎜🎜Vue 코드: 🎜 <el-form-item
ref="goodPicInfoFormpicUrl"
:label="$t('许可证证照')"
class="is-required"
prop="picUrl">
<el-upload
:show-file-list="false"
:http-request="uploadImg"
:data="certImgform"
action=""
class="avatar-uploader">
<img
v-if="queryFrom.picUrl"
:src="queryFrom.picUrl"
class="avatar">
<i
v-else
class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<el-button
type="primary"
plain
size="mini"
@click="viewPcPic(queryFrom.picUrl)">{{ $t('查看') }}</el-button>
</el-form-item>🎜JS 코드: 🎜 //获取元素清除验证
this.$refs.goodPicInfoFormpicUrl.clearValidate()🎜 일반적으로 INPUT 상자를 얻으려면 먼저 DOM 요소를 얻고 DOM 노드를 얻으려면 document.querySelector(".input1")가 필요하며, 그런 다음 input1 값을 가져옵니다. 🎜하지만 ref로 바인딩한 후에는 더 이상 dom 노드를 얻을 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.
그런 다음 javascript에서 다음과 같이 호출합니다. this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 소비를 줄일 수 있습니다
(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)
위 내용은 vue의 $refs는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!