コンポーネントやDOMタグを操作するために、js内から直接アクセスする必要が生じる場合があります。これを実現するために、Vueは現在の子コンポーネントやタグへのid参照を与えるref属性を提供します。refs.refプロパティの値です。
- タグにrefを追加すると、実際のDOMノードが得られます。
- サブコンポーネントにrefを追加すると、現在のサブコンポーネントオブジェクトを取得します。
<body>
<div id="app">
<App></App>
</div>
<script src="https://..net/npm/vue/dist/.js"></script>
<script>
Vue.component('Test', {
data() {
return {
msg: 'tom'
}
},
template: `
<div>
<h3>{{ msg }}</h3>
</div>
`
})
const App = {
template: `
<div>
<Test ref='test'></Test>
<input type='text' ref='input'/>
<button ref='btn'> </button>
</div>
`,
mounted() {
// 1.タグにrefを追加すると、実際のDOMノードを取得する。
// 2.サブコンポーネントへの参照を追加すると、現在のサブコンポーネントオブジェクトを取得する。
console.log(this.$refs.test);
// ページを読み込み、自動的にフォーカスを得る
this.$refs.input.focus();
console.log(this.$refs.btn);
},
}
new Vue({
el: '#app',
components: {
App
}
})
</script>
</body>
Vueは、DOMを直接操作するのではなく、データ駆動型のビューを推進しており、特殊な場合にのみref属性を使用する。
