為什么我不能在 Vue.js 2 中使用 this.$refs 通過 ref 獲取元素？

Question

我在訪問具有 ref 屬性的組件元素時遇到問題。

這是示例代碼。 我有一個 DateTimePicker.vue 組件，其中我為元素設置了一個唯一的 ref。

<datepicker :ref="datePickerInternal.ref"></datepicker>
<timepicker :ref="timePickerInternal.ref"></timepicker>

我可以獲得 datepicker 和 timepicker 的 ref，所以我認為初始化它們的值沒有問題。

但是當我嘗試訪問我的父組件（datetimepicker.vue）時，我收到了它們兩個的空值。

datepicker 的 ref 是 filter-express-item-filter-datetimepicker-range-from10-datepicker- ref和 timepicker 的 ref 是filter-express-item-filter-datetimepicker-range-from10-timepicker-ref

---

因此，當我嘗試使用以下方法訪問它們時：

mounted: function() {
    if (this.$refs['dateTimePicker'] !== undefined) {
        this.setDateTimePickerCustomWidth(this.$refs['dateTimePicker']);
    }
},

methods: {
    setDateTimePickerCustomWidth(dateTimePicker) {
        let datePickerRef = dateTimePicker.$data.datePickerPropsInternal.ref; 
        let timePickerRef = dateTimePicker.$data.timePickerPropsInternal.ref;

        console.log(datePickerRef, timePickerRef); 
        // when I tried to console.log() I can get the reference of both. So the problem is I can access the element by using ref???

        console.log("refs = ", this.$refs[datePickerRef]); 
        // I get "refs = ", null
    }

Answer 1

mounted的生命周期鈎子不保證所有的孩子都被渲染。 假設ref子節點沒有使用v-if有條件地呈現，您可以將引用的代碼移動到vm.$nextTick回調中，其中ref可用：

export default {
  mounted() {
    this.$nextTick(() => {
      let datePickerRef = /* existent ref name */
      console.log(this.$refs[datePickerRef]) // => not undefined
    })
  }
}

Answer 2

您不必綁定 ref。

<div id="app">
  My name is <input v-model="name" ref="myinput">
</div>

    const app = new Vue({
  el:'#app',
  data:{
    name:''
  },
  mounted() {
    console.log(this.$refs.myinput," : ref")
    if(localStorage.name) this.name = localStorage.name;
  },
  watch:{
    name(newName) {
      localStorage.name = newName;
    }
  }
})