refとは?

1)定義

refは、ビューで構成部品またはDOMにアクセスするためのプロパティです.
マウントされている要素にのみ適用されます.ロードされていない要素の場合、ref undefinedが生成されます.

2）使用方法

はターゲットrefの属性にアクセスし、

を示す.

ターゲットthis.refs、

に近い
最も間違いやすい点の一つはrefとrefsのスペルを区別できないことです.

// App.vue
<template>
  <div>
    안녕하세요
    <vue-person
      ref="VuePerson"
      name="dorosy"
    />
  </div>
</template>

<script>
import VuePerson from '@comp/VuePerson'

export default {
  name: 'App',
  components: {
    VuePerson,
  },
  mounted() {
    const name = this.$refs.VuePerson.name
    console.log('name', name) // name dorosy
  }
}
</script>

// VuePerson.vue
<template>
  <div>
    Hi
  </div>
</template>

<script>
    export default {
        name: 'VuePerson',
        props: {
            name: {
                type: String,
                default: ''
            }
        },
        methods: {
            sayHi () {
                console.log(`Hi My name is ${this.name}`)
            }
        }
    }
</script>

3）特徴

すべてのターゲット属性にアクセスできるため、関数を呼び出すこともできます.
でもこれじゃちょっとjqueryな感じ必要に応じてのみ使用します.

// App.vue
<template>
  <div>
    안녕하세요
    <vue-person
      ref="VuePerson"
      name="dorosy"
    />
  </div>
</template>

<script>
import VuePerson from '@comp/VuePerson'

export default {
  name: 'App',
  components: {
    VuePerson,
  },
  mounted() {
    // 대상의 sayHi 메서드 호출
    this.$refs.VuePerson.sayHi() // Hi My name is dorosy
  }
}
</script>

// VuePerson.vue
<template>
  <div>
    Hi
  </div>
</template>

<script>
    export default {
        name: 'VuePerson',
        props: {
            name: {
                type: String,
                default: ''
            }
        },
        methods: {
            sayHi () {
                console.log(`Hi My name is ${this.name}`)
            }
        }
    }
</script>

2.注意事項

1)未マウントの要素

v-if=falseがレンダリングされていないか、create()で使用されている場合、refが定義されていないか、属性がないことを示すエラーが発生します.

2)ref,refsのスペルミスは想像以上に多かった.

ターゲット-ref

アクセス-refs

3)計算で使用する場合

このような状況も想像以上に多い.
レンダリングがあるかどうかをチェックしたいのですが、仕方がないのでacomputed(私ではない)を使ってもいいと思います.
計算が正しくチェックできません.

<template>
  <div>
    안녕하세요
    <vue-person
      ref="VuePerson"
      name="dorosy"
    />
  </div>
</template>

<script>
import VuePerson from '@comp/VuePerson'

export default {
  name: 'App',
  components: {
    VuePerson,
  },
  computed: {
    isExist() {
      console.log('isExist', this.$refs)
      return this.$refs.VuePerson ? true : false
    }
  },
  created() {
    console.log('created', this.isExist)
  },
  mounted() {
    console.log('mounted', this.isExist)
  }

}
</script>

4) watch

計算に似た脈絡やレンダリングの瞬間をキャプチャするにはwatchを使用します.△これは私の物語です.
watchに気づかれない

<template>
  <div>
    안녕하세요
    <vue-person
      ref="VuePerson"
      name="dorosy"
    />
  </div>
</template>

<script>
import VuePerson from '@comp/VuePerson'

export default {
  name: 'App',
  components: {
    VuePerson
  },
  data() {
    return {
      isExist: this.$refs.VuePerson
    }
  },
  watch: {
    isExist(val) {
      console.log('isExist', val)
    },
    'refs.VuePerson' (val) {
      console.log('refs.VuePerson', val)
    }
  }
}
</script>

ここまで来て私もこのような考えを持っています.なぜrefは成功する時もあれば、失敗する時もあるのか...これは私が正式な書類をよく見ていないせいです.

5）追跡困難状態

これはjqueryに直接アクセスする方法であるため,想像以上にステータスの追跡が困難である.
原因はわかりませんが、vueの開発過程では、論理全体を1つのファイルに配置しない場合が多く、その中にrefがいくつかあってもデータの変化を追跡するのは難しいです.
△カバーするとき、疲れた経験があります.
これじゃないとだめだその時に使いましょう
(思ったほどではなく、その場合に簡単に書きたいだけ)