vue의 $refs는 무엇을 의미하나요?-프런트엔드 Q&A-php.cn

vue에서 $refs는 ref 속성으로 등록된 모든 DOM 요소와 구성 요소 인스턴스를 보유하는 객체입니다. ref는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하는 데 사용됩니다. 참조 정보는 일반 DOM 요소에 사용되는 경우 상위 구성 요소의 "$refs" 개체에 등록됩니다. 하위 구성 요소에서 참조는 구성 요소 인스턴스를 가리킵니다.

vue의 $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: &#39;#app&#39;,
        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: &#39;#app&#39;,
        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 = 변수</code를 통해 추가하세요. ></strong> 참조(예: </span><code>: 번호 추가), 참조를 얻으려면 [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 중국어 웹사이트의 기타 관련 기사를 참조하세요!