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