Vue中ref的用法及演示
更新時(shí)間：2022年01月24日 13:10:29 作者：緣分锝天空
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上，下面來(lái)看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下
ref 定義：被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上。
- 如果是在普通的
dom元素上使用，引用指向的就是dom元素； - 如果用在子組件上，引用指向的就是組件實(shí)例。
舉例：
組件1：
<template>
<div>
我是{
{name}}
</div>
</template>
<script>
export default {
name:'Cpn1',
data() {
return {
name:'組件1'
}
},
}
</script>組件2：
<template>
<div>我是{
{name}}</div>
</template>
<script>
export default {
name:'Cpn2',
data() {
return {
name:'組件2'
}
},
}
</script>App.vue
<template>
<div id="app">
<cpn-1 ref="c1"></cpn-1>
<cpn-2 ref="c2"></cpn-2>
<button @click="showDom">按鈕</button>
<h2 ref="title">我是標(biāo)題</h2>
<input type="text" ref="input" value="123">
</div>
</template>
<script>
import Cpn1 from "./components/Cpn1.vue";
import Cpn2 from "./components/Cpn2.vue";
export default {
components: {
Cpn1, Cpn2 },
name: "App",
methods: {
showDom() {
console.log(this.$refs.c1);
console.log(this.$refs.c2.$data.name);
console.log(this.$refs.title)
console.log(this.$refs.input.value)
// 獲取一個(gè)真實(shí)的dom對(duì)象并修改值
var title=this.$refs.title;
title.innerText="helloWord"
},
},
};
</script>執(zhí)行上面的程序，點(diǎn)擊頁(yè)面上的《按鈕》，效果如下：
同時(shí)看控制臺(tái)：
可以看到當(dāng)ref對(duì)象用在普通元素上時(shí)獲取到的是普通DOM元素，當(dāng)ref用在子組件上時(shí)，引用指向組件實(shí)例。
根據(jù)實(shí)際需要，可以通過(guò)ref給元素或者子組件注冊(cè)引用信息，在需要用到的時(shí)候我們可以通過(guò)$refs獲取真實(shí)的DOM元素或者組件實(shí)例進(jìn)行我們想要的操作。
到此這篇關(guān)于Vue中ref的用法及演示的文章就介紹到這了,更多相關(guān)Vue中ref的用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項(xiàng)目的完整步驟，文中通過(guò)示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue-cli 作為 Vue 官方推薦的項(xiàng)目構(gòu)建腳手架，它提供了開(kāi)發(fā)過(guò)程中常用的，熱重載，構(gòu)建，調(diào)試，單元測(cè)試，代碼檢測(cè)等功能。我們本次的異步遠(yuǎn)端組件將基于 vue-cli 開(kāi)發(fā)2017-11-11
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開(kāi)箱即用的交互組件和簡(jiǎn)單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來(lái)就看看vue如何使用它2021-05-05
這篇文章主要介紹了vue3頁(yè)面加載完成后如何獲取寬度、高度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn)，需要的朋友可以學(xué)習(xí)下。2018-04-04
這篇文章主要介紹了vuejs中父子組件之間通信方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js父組件向子組件傳遞消息以及子組件向父組件傳遞消息具體操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01
vue 監(jiān)聽(tīng)鍵盤(pán)回車(chē)事件詳解 @keyup.enter || @keyup.enter.native
今天小編就為大家分享一篇vue 監(jiān)聽(tīng)鍵盤(pán)回車(chē)事件詳解 @keyup.enter || @keyup.enter.native，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說(shuō)就是使用配置文件來(lái)管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11