相信前端開發或者后端開發都用過jquery,因為不是數據驅動，為了獲取某些元素的value值，都操作過Dom元素。

//?使用Jquery獲取Dom元素值
$("#id").text('xxx')??
$("#id").value('xxx')??
//?使用原生Dom
document.getElementById("id")??
document.getElementsByClassName("className")??
都經歷過被Dom操作支配的恐懼，現在很多框架也都幫我們完成了這部分操作，我們不用再去子元素、父元素，只負責數據邏輯即可，如Vue，但是如果我們在某些條件下，依然需要操作Dom時，怎么辦呢？Vue提供了ref、$ref。本次，我們就詳細講講這兩個屬性。1.refref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的?$refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例：
<p?ref="p">hellop>


<child-component?ref="child">child-component>
1)作用于html標簽<template>
??<div?class="about">
????<div?ref="userName">{{?username?}}div>
????<button?@click="clickBtn">點擊button>
??div>
template>
<script>export?default?{
??data()?{return?{?username:?"測試"?};
??},methods:?{
????clickBtn()?{console.log(this.$refs.userName);
????}
??}
};script>

點擊按鈕，我們可以拿到綁定的Dom2)作用于組件子組件<template>
????<div>{{msg}}div>
template>

<script>export?default?{
??data()?{return?{msg:?'我是子組件'
????}
??},methods:?{
????changeMsg()?{this.msg?=?'變身'
????}
??}
}script>
父組件<template>
??<div?@click="parentMethod">
????<children?ref="children">children>
??div>
template>

<script>import?children?from?'components/children.vue'export?default?{components:?{?
????children?
??},
??data()?{return?{}
??},methods:?{
????parentMethod()?{//返回一個對象this.$refs.children??//?調用children的changeMsg方法this.$refs.children.changeMsg()?
????}
??}
}script>
這種方式我們可以通過$refs直接調用子組件方法2.$refs一個對象，持有注冊過?ref?attribute的所有 DOM 元素和組件實例。<template>
??<div?class="about">
????<div?ref="userName">{{?username?}}div>
????<div?ref="age">{{?age?}}div>
????<button?@click="clickBtn">點擊button>
??div>
template>
<script>export?default?{
??data()?{return?{username:?"測試",age:?11
????};
??},methods:?{
????clickBtn()?{console.log(this.$refs);
????}
??}
};script>

可以看到是個對象，里邊包含了我們的定義的兩個，可以通過下面方式，獲取Dom實例進行后續操作。this.$refs.userName
this.$refs.age

$refs 只會在組件渲染完成之后生效，并且它們不是響應式的。這僅作為一個用于直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問?

總結

以上是生活随笔為你收集整理的ref获取元素 vue 删除子元素_vue中的 ref 和 $refs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。