Rumah > Artikel > hujung hadapan web > Apakah maksud $refs dalam vue?

Apakah maksud $refs dalam vue?

青灯夜游asal: 2022-12-14 19:27:122436semak imbas

Dalam vue, $refs ialah objek yang memegang semua elemen DOM dan tika komponen yang didaftarkan dengan atribut ref. ref digunakan untuk mendaftarkan maklumat rujukan untuk elemen atau sub-komponen Maklumat rujukan akan didaftarkan pada objek "$refs" komponen induk jika digunakan pada elemen DOM biasa, rujukan menunjuk kepada elemen DOM; pada sub-komponen , rujukan menunjuk kepada contoh komponen.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

$refs dalam Vue

$refs ialah objek yang memegang semua elemen DOM dan tika komponen yang didaftarkan dengan atribut ref.

Penerangan

ref digunakan untuk mendaftarkan maklumat rujukan untuk elemen atau sub-komponen Maklumat rujukan akan didaftarkan pada objek $refs komponen induk,

Selain itu, apabila v-for digunakan untuk elemen atau komponen, maklumat rujukan akan menjadi tatasusunan yang mengandungi nod DOM atau tika komponen. [Cadangan berkaitan:
tutorial video vuejs
pembangunan bahagian hadapan web
]

Oleh kerana ref itu sendiri dicipta sebagai hasil pemaparan, semasa pemaparan awal ia adalah Ia tidak boleh diakses kerana ia belum wujud lagi, dan $refs tidak responsif, jadi anda tidak boleh cuba menggunakannya untuk mengikat data dalam templat Apabila memulakan akses kepada ref, anda harus memanggilnya dalam kaedah yang dipasang Kitaran hayat Selepas data dikemas kini, operasi panggil balik harus dihantar dalam kaedah $nextTick untuk mendapatkan elemen atau kejadian Selain itu, secara amnya tidak disyorkan untuk mengendalikan elemen DOM secara langsung untuk membenarkan ViewModel MVVM beroperasi DOM.

Penggunaan asas $refs dalam VUE

<!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>

<!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>

ref mempunyai tiga kegunaan:

1. Untuk menambah ref pada elemen biasa, gunakan ini.$refs (nilai ref) untuk mendapatkan elemen dom

2. Untuk menambah ref pada subkomponen, gunakan ini.$refs. (nilai ref) Apa yang diperolehi ialah contoh komponen

dan semua kaedah komponen

boleh digunakan. Apabila menggunakan kaedah, hanya ini.$refs.(nilai ref).method() boleh digunakan.

　3. Cara menggunakan v-for dan ref untuk mendapatkan set tatasusunan atau nod dom Perangkap yang perlu diberi perhatian: 1. Jika anda ingin menambah rujukan yang berbeza melalui v-untuk traversal, ingat untuk menambah

, iaitu,

; Ini adalah sama sebagai atribut lain, jika ia adalah nilai tetap Tidak perlu menambah tanda

Jika ia pembolehubah, ingat untuk menambah tanda :. (Dengan titik bertindih, ini bermakna yang berikut ialah pembolehubah atau ungkapan; jika tiada titik bertindih, ini bermakna pemalar rentetan yang sepadan (String)) :ref =某变量2 Tambah ref melalui
: (Iaitu, tambah nombor :), jika anda ingin mendapatkan rujukan, anda perlu menambah

, seperti :ref =某变量 ; jika tidak Tidak perlu menambah : dan bukannya [0], seperti this.$refs[refsArrayItem] [0]:ref =某变量ref =某字符串 1. ref perlu this.$refs[refsArrayItem]。 selepas rendering dom selesai semasa menggunakannya, pastikan dom telah dirender. Contohnya, panggil

dalam kitaran hayat

kait terpasang(){} atau

panggil . 2. Jika ref digelung dan mempunyai berbilang nama pendua, maka nilai ref akan menjadi array Pada masa ini, anda perlu mendapatkan a ref tunggal Hanya perlu gelung. Contoh 1:

Tambah atribut refDapatkan semua komponen atau elemen didaftarkan dengan ref

Contoh 2:

Kod Vue:

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>
 
    <button @click="getref">获取H1元素</button>
</div>

Kod JS:

methods: {
        getref() {
          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
           console.log(this.$refs.h1Ele.innerText);
           this.$refs.h1ele.style.color = &#39;red&#39;;// 修改html样式
 
          console.log(this.$refs.ho.msg);// 获取组件数据
          console.log(this.$refs.ho.test);// 获取组件的方法
        }
      }

Contoh 3:

Kod 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?&#39;titleClicked&#39;:&#39;&#39;" 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">&#xe678;</i>
                                <div class="share" v-if="scope.row.showShare">
                                    <img class="hoverHand shareItem" title="分享到微博" @click="shareItem(&#39;sina&#39;,$event);" src="@/images/WEIBO.png">
                                    <img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem(&#39;wx&#39;,$event);" src="@/images/WEIXIN.png">
                                    <img class="hoverHand shareItem" title="分享到QQ" @click="shareItem(&#39;qq&#39;,$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>

Kod JS:

//点击清空条件，调用该方法
emptyAndSearch(){//清空条件方法
			//清空树选中状态
			this.clearTreeNodeCheck([&#39;tree&#39;]);
			//清除排序
			this.$refs.multipleSelection.clearSort();
			//设置分页参数
			this.queryParam = {
				startRow : 1,
                pageSize : 20,
                condition:{
                }
			}
			//分页查询调用
			this.confirmSearch(&#39;statistics&#39;);
			//设置清空条件为false
			this.$store.commit(&#39;valueDryGoodDatas/SET_CLEAR_ALL&#39;,false);
		}

Secara umumnya, jika anda ingin mendapatkan kotak INPUT, mula-mula dapatkan elemen DOM, anda memerlukan dokumen. querySelector(" .input1") untuk mendapatkan nod dom ini, dan kemudian dapatkan nilai input1. Tetapi selepas mengikat dengan ref, kita tidak perlu lagi mendapatkan nod dom Kita boleh terus mengikat input1 ke input di atas dan kemudian memanggilnya dalam $refs.

Kemudian panggilnya seperti ini dalam javascript: this.$refs.input1 Ini boleh mengurangkan penggunaan mendapatkan nod dom

(Belajar perkongsian video: tutorial pengenalan vuejs, Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Apakah maksud $refs dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah rangka kerja yang digunakan untuk terminal mudah alih vue?Artikel seterusnya：Apakah rangka kerja yang digunakan untuk terminal mudah alih vue?

Artikel berkaitan

Lihat lagi