[Vue]ref 属性

---

序文

一連の記事のカタログ:
[Vue] ビデオ
を除く教師のコースウェア ノートのカタログhttps://www.aliyundrive.com/s/B8sDe5u56BU

オンライン版ノート: https://note.youdao.com/s/5vP46EPC

ビデオ: Shang Silicon Valley Vue2.0+Vue3.0 入門から習熟までのチュートリアルのフルセット丨vuejs

---

---

1. ref 属性

ref属性は要素やサブコンポーネントへの参照情報（idの代替）を登録するために使用され、ページ要素やサブコンポーネントを識別することに相当します。ref 属性を使用してページ要素またはサブコンポーネントを識別する後、特定された要素またはサブコンポーネントこれは、それが配置されているコンポーネント インスタンス オブジェクトによって収集され、マウントされます。コンポーネントインスタンスオブジェクトの$refプロパティについて。

1.1 ref属性の使い方

1.1.1 要素またはサブコンポーネントを特定する

HTML タグ要素をマークします:

<h1 ref="xxx">.....</h1>

サブコンポーネントにマークを付ける:

<School ref="xxx"></School>

1.1.2 識別された要素またはサブコンポーネントを取得する

this.$refs.xxx

このうち、これは、マークされた要素またはサブコンポーネントが配置されているコンポーネント インスタンス オブジェクトです。

1.2 ref 属性を使用して HTML タグ要素をマークする

ref 属性は HTML タグ要素に適用されます。取得されるのは、対応する実際の DOM 要素です

<template>
  <div>
    <h1 ref="hello">Hello World</h1>
    <button @click="showH1">showH1</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'App'
  methods: {
      
      
    showH1() {
      
      
      console.log(this.$refs.hello)
      console.log(this.$refs)
    }
  }
}
</script>

<style>

</style>

1.3 ref 属性を使用してサブコンポーネントをマークする

ref 属性はコンポーネントタグに適用されます。取得されるのは、対応するコンポーネント インスタンス オブジェクトです。

MySchool コンポーネント:

<template>
  <div class="demo">
    <h2>学校：{
   
   {name}}</h2>
    <h2>地址：{
   
   {address}}</h2>
  </div>
</template>

<script>
export default {
      
      
  name: 'MySchool',
  data() {
      
      
    return {
      
      
      name: 'SGG',
      address: 'Beijing'
    }
  },
}
</script>

<style>
  .demo {
      
      
    background-color: chocolate;
  }
</style>

アプリのコンポーネント:

<template>
  <div>
    <h1 ref="hello">Hello World</h1>
    <MySchool ref="myschool"></MySchool>
    <button @click="showH1">showH1</button> <br><br>
    <button @click="showMySchool">showMySchool</button>
  </div>
</template>

<script>
// 导入子组件
import MySchool from './components/MySchool.vue'

export default {
      
      
  name: 'App',
  components: {
      
      
    MySchool,
  },
  methods: {
      
      
    showH1() {
      
      
      console.log(this.$refs.hello)
      console.log(this.$refs)
    },
    showMySchool() {
      
      
      console.log(this.$refs.myschool)
      console.log(this.$refs)
    }
  }
}
</script>

<style>

</style>

1.4 ID を使用して要素またはサブコンポーネントを取得する

<template>
  <div>
    <h1 ref="hello" id="hh">Hello World</h1>
    <MySchool ref="myschool" id="school"></MySchool>
    <button @click="showH1_School">showH1_School</button>
  </div>
</template>

<script>
// 导入子组件
import MySchool from './components/MySchool.vue'

export default {
      
      
  name: 'App',
  components: {
      
      
    MySchool
  },
  methods: {
      
      
    showH1_School() {
      
      
      console.log(document.getElementById('hh'))
      console.log(document.getElementById('school'))
    }
  }
}
</script>

<style>
</style>

ref 属性の使用と id の使用を比較してください。ref 属性を使用する場合、DOM 要素を自分で操作する必要はありません。サブコンポーネントを取得するために ref 属性を使用すると、コンパイルされたコンポーネントの代わりにコンポーネント インスタンス オブジェクト全体が取得されます。サブコンポーネントの解析されたテンプレートは、サブコンポーネントの後の処理に役立ちます。