Question

Vue js，无法读取属性$el

2019-04-15

5891

vuejs2 vue-component

我有正确理解流量元素的问题，在vue js中调用的方法。这是标准的想法 - 从REST API中获取一些数据，然后在浏览器上渲染。

我写入 motted（） 的获取方法。另外，我在那里添加了调用 renderhomepagemethod（） 。此方法是用 方法写的：

719345041

in renderhomepagemethod（） i i使用 this.refs $ < /代码>和 $ el 。可能存在问题，一切正常，但是在浏览器中，我得到了警告：

111230577

可能我应该调用

014192316
 
 
  在另一个地方。但是在哪里？

Answer 1

似乎您引用的组件在主组件渲染之前未渲染，因此会出现引用错误。

一种 hack 方式可能是这样的：

mounted() {
    axios.get("http://localhost:3000/api/test").then(response => {
        this.testData= response.data
        setTimeout(() => {
            this.renderHomePageMethod();
        }, 1000); // or any other minimum delay before the subcomponent is rendered
    });
}

或者更好更难的方式，创建一个 event-bus.js 文件，其中包含：

import Vue from 'vue';
export const EventBus = new Vue();

在您的主组件和子组件中：

import { EventBus } from "./event-bus.js";

在您的子组件中，当主组件准备好滚动时，这将向主组件发送通知：

mounted(){
    EventBus.$emit("subcomponent:is-mounted");
}

在您的主组件中：

data(){
    return {
       testData: null
    }
},
mounted(){
   axios.get("http://localhost:3000/api/test").then(response => {
       this.testData= response.data
   });
   EventBus.$on("subcomponent:is-mounted", () =>{
       this.renderHomePageMethod();
   });
},
beforeDestroy(){
   EventBus.$off("subcomponent:is-mounted");
   // don't forget to remove the listeners because of duplicate listeners may occur 
   // if your component refreshes (remounts)
}