Динамическая реализация компонента в Vue.js

Question

После этого урока я пытаюсь программно создать экземпляры компонента на моей странице.

Основной фрагмент этого кода:

import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)

Однако я получаю две ошибки:

1. Компонент, который я пытаюсь создать, содержит ссылки на хранилище, и они не работают: "TypeError: Невозможно прочитать свойство 'состояние' из неопределенного" .

2. Для последней строки фрагмента (this.$refs.container.appendChild(instance.$el)) я получаю эту ошибку: "Uncaught TypeError: Невозможно прочитать свойство 'container' of undefined"

Я действительно не уверен, как решить эту проблему, если кто-то сильный в Vue.js может дать мне подсказку о том, почему я получаю эти ошибки и решать их, что было бы потрясающе.

Answer 1

1) Поскольку вы создаете экземпляр этого компонента вручную, а он не принадлежит дереву компонентов вашего основного приложения, хранилище не будет автоматически вставлено в него из корневого компонента. При создании экземпляра компонента вам придется вручную предоставить хранилище конструктору.

import ProjectRow from "./ProjectRow.vue";
import Vue from "vue";
import store from "../store";

let ProjectRowClass = Vue.extend(ProjectRow);
let ProjectRowInstance = new ProjectRowClass({ store });

2) В отдельном файловом компоненте Vue (SFC) вне экспорта по умолчанию this не ссылается на экземпляр Vue, поэтому у вас нет доступа к $refs или любое другое свойство / метод экземпляра Vue. Чтобы получить доступ к экземпляру Vue, вам нужно переместить эту строку this.$refs.container.appendChild(instance.$el) куда-нибудь внутри экспорта по умолчанию, например, в хук mounted или внутри одного из ваших methods.

См. CodeSandbox , чтобы узнать, как вы можете это сделать.