Vue中ref的用法及演示
更新時間：2022年01月24日 13:10:29 作者：緣分锝天空
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來給元素或子組件注冊引用信息。引用信息會被注冊在父組件上的$refs對象上，下面來看看文章的詳細內容,需要的朋友可以參考一下
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用在子組件上時，引用指向組件實例。
根據實際需要，可以通過ref給元素或者子組件注冊引用信息，在需要用到的時候我們可以通過$refs獲取真實的DOM元素或者組件實例進行我們想要的操作。
到此這篇關于Vue中ref的用法及演示的文章就介紹到這了,更多相關Vue中ref的用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue3造輪子之打包構建配置二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue構建動態(tài)表單的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue select二級聯(lián)動第二級默認選中第一個option值的實例
下面小編就為大家分享一篇vue select二級聯(lián)動第二級默認選中第一個option值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue兩種組件類型:遞歸組件和動態(tài)組件的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
給大家?guī)硪黄P于用nodejs實現(xiàn)excel文件的讀取并去重的功能，有興趣的朋友參考學習下。2018-04-04
vue如何使用cookie、localStorage和sessionStorage進行儲存數據
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進行儲存數據，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了Vue.js動態(tài)組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本篇文章主要介紹了關于Vue的路由權限管理的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue中圖片Src使用變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
import.meta.glob() 如何導入多個目錄下的資源(最新推薦)
import.meta.glob() 其實不僅能接收一個字符串,還可以接收一個字符串數組,就是匹配多個位置,本文給大家介紹import.meta.glob() 如何導入多個目錄下的資源,感興趣的朋友一起看看吧2023-11-11