Vue - Почему для добавления компонента с ленивой загрузкой требуется 2 галочки - PullRequest
Новая
       7

Vue - Почему для добавления компонента с ленивой загрузкой требуется 2 галочки

0 голосов
/ 17 июня 2020

У меня есть компонент для каждого файла, и я использую ленивую загрузку, как показано здесь: https://vuejs.org/v2/guide/components-dynamic-async.html#Async -Components 

  <script>
import Vue from "vue";
export default {
  name: "example",
  components: {
    BaseBlueButton: () => import("@/components/BaseBlueButton"),
    BaseWhiteButton: () => import("@/components/BaseWhiteButton"),
    FloatingHead: () => import("@/components/BaseFloatingHead")
  }, 
  async mounted() { 
    await Vue.nextTick();
    await Vue.nextTick();
    console.log(this.$refs)
    this.$refs.startAvatarButton.$el.focus();
  }
};
</script>

В функции connected (), если я удалю один из hte nextTick, тогда ссылка пуста. Если я импортирую компонент обычным способом, то проблем нет. ПОЧЕМУ ???

В другую сторону: 

<script>
import Vue from "vue";
import BaseBlueButton from "@/components/BaseBlueButton";
import BaseWhiteButton from "@/components/BaseWhiteButton";
import FloatingHead from "@/components/BaseFloatingHead";
export default {
  name: "TheUserChoice",
  components: {
    BaseBlueButton,
    BaseWhiteButton,
    FloatingHead
  }, 
  async mounted() { 
    await Vue.nextTick();
    this.$refs.startAvatarButton.$el.focus();
  }
};
</script>
...