ホームページ >ウェブフロントエンド >フロントエンドQ&A >vue の $refs とはどういう意味ですか?
vue の $refs とはどういう意味ですか?
- 青灯夜游オリジナル
- 2022-12-14 19:27:122501ブラウズ
vue では、$refs は、ref 属性で登録されたすべての DOM 要素とコンポーネント インスタンスを保持するオブジェクトです。 ref は要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は親コンポーネントの "$refs" オブジェクトに登録されます。通常の DOM 要素で使用された場合、参照は DOM 要素を指します。サブコンポーネントでは、参照はコンポーネント インスタンスを指します。
$refs
$refs は、ref 属性で登録されたすべての DOM 要素とコンポーネント インスタンスを保持するオブジェクトです。説明
ref は、要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コンポーネント # の $refs オブジェクトに登録されます
- ##通常の DOM 要素で使用される場合、参照は DOM 要素を指します。
- 子コンポーネントで使用される場合、参照は DOM 要素を指します。コンポーネントインスタンス;
- また、要素やコンポーネントに v-for を使用した場合、参照情報は DOM ノードやコンポーネントインスタンスを含む配列となります。 [関連する推奨事項:
、Web フロントエンド開発 ]<!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: '#app',
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>ref 自体はレンダリング結果として作成されるため、実行中にアクセスすることはできません。初期レンダリング。これはまだ存在せず、$refs は応答しないため、テンプレートのデータ バインディングに使用しないでください。ref へのアクセスを初期化するときは、そのライフ サイクルのマウントされたメソッドでそれを呼び出す必要があります。データの更新後、$nextTick メソッドでコールバック操作を渡して要素またはインスタンスを取得する必要があります。また、DOM 要素を直接操作することは一般的に推奨されません。データ バインディングを使用して、MVVM の ViewModel で DOM を操作できるようにしてください。 。
<!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: '#app',
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>
VUE での $refs の基本的な使用法
ref には 3 つの使用法があります:1 , 通常の要素に ref を追加します。
this.$refs. (ref 値)取得したのは dom 要素です 2. サブコンポーネントに ref を追加します。
this.$refs.(ref値)取得されるのは、コンポーネントのインスタンスであり、コンポーネントのすべてのメソッドが利用可能です。メソッドを使用する場合は、this.$refs.(ref value).method() として直接使用できます。 # 3. v-for と ref を使用して配列または dom ノードのセットを取得する方法注意すべき点:
1. v-for トラバーサルを通じて別の ref を追加したい場合は、:
、つまり:ref = 変数 # を追加することを忘れないでください。 ##; 他の属性と同様、固定値の場合は ##: を付ける必要はありませんが、変数の場合は、忘れずに :
を追加してください。 (コロンが追加されている場合は、その後に変数または式が続くことを意味します。コロンがない場合は、対応する文字列定数 (String) を意味します。) 2. : を渡します。 ref = 変数 ref を追加します (つまり、
を追加します)。ref を取得したい場合は、 を追加する必要があります。 [0] (例: this.$refs[refsArrayItem] [0]; でない場合: ref = 変数 ただし、 ref = 特定の文字列 である場合は、this.$refs[refsArrayItem] のように追加する必要はありません。 1、Make make を使用する場合、DOM のレンダリングが完了した後、ref は
である必要があります。ドムがレンダリングされました。たとえば、ライフサイクル 
を呼び出すか、this.$nextTick(()=>{} で call ## を呼び出します。 ) #。 2. ref がループアウトされ、 に複数の重複した名前がある場合、ref の値は配列 になります。このとき、単一の参照をループするだけです。
例 1:ref 属性の追加<div id="app">
<h1 ref="h1Ele">这是H1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取H1元素</button>
</div>ref に登録されているすべてのコンポーネントまたは要素を取得
methods: {
getref() {
// 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
console.log(this.$refs.h1Ele.innerText);
this.$refs.h1ele.style.color = 'red';// 修改html样式
console.log(this.$refs.ho.msg);// 获取组件数据
console.log(this.$refs.ho.test);// 获取组件的方法
}
}例2:
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?'titleClicked':''" 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"></i>
<div class="share" v-if="scope.row.showShare">
<img class="hoverHand shareItem" title="分享到微博" @click="shareItem('sina',$event);" src="@/images/WEIBO.png">
<img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem('wx',$event);" src="@/images/WEIXIN.png">
<img class="hoverHand shareItem" title="分享到QQ" @click="shareItem('qq',$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>JS コード:
//点击清空条件，调用该方法
emptyAndSearch(){//清空条件方法
//清空树选中状态
this.clearTreeNodeCheck(['tree']);
//清除排序
this.$refs.multipleSelection.clearSort();
//设置分页参数
this.queryParam = {
startRow : 1,
pageSize : 20,
condition:{
}
}
//分页查询调用
this.confirmSearch('statistics');
//设置清空条件为false
this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
}例 3:
Vue コード:
<el-form-item
ref="goodPicInfoFormpicUrl"
:label="$t('许可证证照')"
class="is-required"
prop="picUrl">
<el-upload
:show-file-list="false"
:http-request="uploadImg"
:data="certImgform"
action=""
class="avatar-uploader">
<img
v-if="queryFrom.picUrl"
:src="queryFrom.picUrl"
class="avatar">
<i
v-else
class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<el-button
type="primary"
plain
size="mini"
@click="viewPcPic(queryFrom.picUrl)">{{ $t('查看') }}</el-button>
</el-form-item>JS コード:
//获取元素清除验证
this.$refs.goodPicInfoFormpicUrl.clearValidate() 一般的に、INPUT ボックスを取得したい場合は、まず DOM 要素を取得します。DOM ノードを取得するには document.querySelector (".input1") が必要です。 、次に input1 の値を取得します。 しかし、ref でバインドした後は、dom ノードを取得する必要がなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。
次に、これを JavaScript で呼び出します: this.$refs.input1 これにより、dom ノードの取得にかかる消費量を減らすことができます。
(学習ビデオ共有: vuejs 入門チュートリアル , 基本的なプログラミングのビデオ)
以上がvue の $refs とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。