refは、vueによって提供される非常に便利な属性です。それはすることができ、直接ページ要素のDOMノードを取得、またはその子コンポーネントオブジェクトを取得することができます。
VueはvueプロジェクトでDOMをさりげなく操作しないことを推奨していますが、最後の手段として、DOMを操作する必要があり、ref属性で簡単にニーズを達成できます。
また、サブコンポーネントを使用する場合は、データデータを取得してメソッドを呼び出す必要があります。これは、ref属性の優れた使用法でもあります。
要約すると、それは非常に便利で使いやすいです。
<div id="app">
<App></App>
</div>
<script>
Vue.component('Test',{
data () {
return {
msg:'Ray'
}
},
template:`
<div>
<h3>{
{msg}}</h3>
</div>
`
})
const App = {
data () {
return {
}
},
mounted () {
console.log(this.$refs.btn);
console.log(this.$refs.input);
// 加载页面,自动获取焦点
this.$refs.input.focus();
console.log(this.$refs.test);
},
components: {
},
template:`
<div>
<Test ref='test'></Test>
<input type='text' ref='input' />
<button ref='btn'>button</button>
</div>
`
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
私たちは、書いたグローバルなコンポーネントをテスト表示データのデータへの単純H3タグです。
次に、Testコンポーネントと呼ばれる部分コンポーネントAppを作成し、それにテストとしてref属性を指定しました。また、input、button、およびref属性も作成しました。
最後に、mountedのライフサイクル関数で、this。$ refsの形式を使用して、ref属性が取得できるものを確認します。
1つ目は、このコンポーネント要素のDOMノードであるthis 。＄ refs.btnとthis。＄ refs.inputをそれぞれ出力することです。そして、フォーカス関数の入力要素を呼び出して、関数を実現するための入力ボックスがロード後に自動的にフォーカスを取得するようにします。これは、実際に真のDOMノードに到達したことを示しています。次に、this。$ Refs.testのサブコンポーネントの出力を確認し、子コンポーネントオブジェクトに正常に到達します。そして、コンポーネント内のデータthis。＄ refs.test.msgを呼び出して、サブコンポーネント内のデータデータを正常に取得してみてください。
ref属性の機能は、次の2つのポイントに簡単に要約できます。
- このコンポーネント要素のDOMノードを取得します
- 子コンポーネントオブジェクトのすべてのコンテンツを取得します
refは非常に便利な属性であり、すぐに取得できます。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
