記事ディレクトリ
参照リファレンス
1.参照
refは、開発者がjQueryに依存せずにDOM要素またはコンポーネントへの参照を取得するのを支援するために使用されます。
各Vueコンポーネントインスタンスには、対応するDOM要素またはコンポーネントへの参照を格納する$refsオブジェクトが含まれています。デフォルトでは、コンポーネントは空のオブジェクト$refsを指します。
<template>
<div>
<h1>App 组件</h1>
<hr>
<button @click="getRef"> 获取 $ref </button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
getRef() {
console.log( this )
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>App 组件</h1>
<hr>
<button @click="getRef"> 获取 $ref </button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
getRef() {
console.log( this.$refs )
}
}
}
</script>
<style>
</style>
2.参照を使用してDOM要素を参照します
refを使用して、ページ上のDOM要素を参照します。
<template>
<div>
<!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
<h1 ref="myh1">App 组件</h1>
<hr>
<button @click="getRef"> 获取 $ref </button>
<br>
<button @click="change"> App change </button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
getRef() {
console.log( this.$refs )
},
change() {
// 通过 this.$refs.引用名称 获取对应 DOM 元素的引用
console.log( this.$refs.myh1 )
// 改变 h1 的字体颜色
this.$refs.myh1.style.color = 'red'
}
}
}
</script>
<style>
</style>
3. refを使用して、コンポーネントインスタンスを参照します
refを使用して、ページ上のコンポーネントインスタンスを参照します。
DOM要素と同様に、ref属性を使用して、対応するコンポーネントに参照名を追加します。this。$refs.reference名を使用して、対応するコンポーネントの参照を取得します。
<template>
<div>
<h3>Count 组件</h3>
<div> {
{count}} </div>
</div>
</template>
<script>
export default {
name: 'Count',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count++
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
<h1 ref="myh1">App 组件</h1>
<hr>
<button @click="getMyCount"> get myCount </button>
<Count ref="myCount"></Count>
</div>
</template>
<script>
import Count from './Count.vue'
export default {
name: 'App',
methods: {
getMyCount() {
console.log( this.$refs.myCount )
}
},
components: {
Count
}
}
</script>
<style>
</style>
コンポーネントで定義されたメソッドを呼び出す
<template>
<div>
<!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
<h1 ref="myh1">App 组件</h1>
<hr>
<button @click="getMyCount"> get myCount </button>
<button @click="countAdd"> count +1 </button>
<Count ref="myCount"></Count>
</div>
</template>
<script>
import Count from './Count.vue'
export default {
name: 'App',
methods: {
getMyCount() {
console.log( this.$refs.myCount )
},
countAdd() {
// 调用组件内定义的 add 方法
this.$refs.myCount.add()
}
},
components: {
Count
}
}
</script>
<style>
</style>
4.テキストボックスとボタンのオンデマンド切り替えを制御し、テキストボックスが自動的にフォーカスを取得できるようにします
ブール値inputVisibleを使用して、コンポーネント内のテキストボックスとボタンのオンデマンド切り替えを制御します。
テキストボックスが表示された後、すぐにフォーカスを取得したい場合は、テキストボックスへの参照参照を追加して、ネイティブDOMオブジェクトの
.focus（）メソッドを呼び出すことができます。
<template>
<div>
<!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
<h1 ref="myh1">App 组件</h1>
<hr>
<input type="text" v-show="inputVisible" ref="myipt">
<button @click="ipt_change">ipt change</button>
</div>
</template>
<script>
import Count from './Count.vue'
export default {
name: 'App',
data() {
return {
inputVisible: false
}
},
methods: {
ipt_change() {
this.inputVisible = !this.inputVisible
this.$refs.myipt.focus()
}
},
components: {
Count
}
}
</script>
<style>
</style>
このとき、入力ボックスの表示状態が切り替わり、ピントが合いません。this.$refs.myipt.focus()実行時に、コンポーネントはまだページに表示されていないためです。そのため、ピント合わせができずthis.$refs.myipt.focus()、要素の表示よりも実行速度が速くなります。
5.this。$nextTick（cb）メソッド
コンポーネントの$nextTick（cb）メソッドは、次のDOM更新サイクルが終了するまでcbコールバックを延期します。
一般的な理解は
、コンポーネントのDOMが非同期で再レンダリングされるのを待ってから、cbコールバック関数を実行することです。これにより、cbコールバック関数が最新のDOM要素で動作できるようになります。
上記のコードを変更します。
methods: {
ipt_change() {
this.inputVisible = !this.inputVisible
//组件的DOM 异步地重新渲染完成后，再执行 cb 回调函数。
this.$nextTick( ()=>{
this.$refs.myipt.focus()
} )
}
},
<template>
<div>
<!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
<h1 ref="myh1">App 组件</h1>
<hr>
<input type="text" v-show="inputVisible" ref="myipt">
<button @click="ipt_change">ipt change</button>
</div>
</template>
<script>
import Count from './Count.vue'
export default {
name: 'App',
data() {
return {
inputVisible: false
}
},
methods: {
ipt_change() {
this.inputVisible = !this.inputVisible
this.$nextTick( ()=>{
this.$refs.myipt.focus()
} )
}
},
components: {
Count
}
}
</script>
<style>
</style>
