Question

我在访问具有ref属性的组件元素时遇到问题。

这是示例代码。我有一个DateTimePicker.vue组件，其中为该元素设置了唯一的引用。

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

我可以同时获取datepicker和timepicker的引用，因此我认为初始化它们的值没有问题。

但是当我尝试访问父组件（datetimepicker.vue）时，我都收到了一个空值。

日期选择器的参考是 filter-express-item-filter-datetimepicker-range-from10-datepicker-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

您不必绑定参考。

<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;
    }
  }
})

Answer 2

mounted生命周期挂钩pointer events。假设ref子项没有使用v-if有条件地呈现，则可以将引用的代码移到vm.$nextTick回调中，其中ref可用：

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

为什么在Vue.js 2中无法使用this。$ refs通过引用获取元素？

2 个答案: