VueJS通过代码加载模板组件吗?

问题描述 投票:0回答:1

我正在尝试制作一个模板组件,以便以后在我的项目中使用。但是,我很难通过代码在想要的元素上显示它。

到目前为止,我的代码就是这样。

<template>
  <div>
    <b-alert show dismissible variant="danger" v-show="elementVisible">
        <i class="mdi mdi-block-helper mr-2"></i>{{ text }}
    </b-alert>
  </div>
</template>

<script>
export default {
  name: "alertDanager",
  props: {
    text: null
  },
  data() {
    return {
      elementVisible: true
    };
  },
  created() {
    setTimeout(() => (this.elementVisible = false), 5000);
  }
};
</script>

我正在尝试对此采取行动

我导入

import dangerAlert from "@/components/Alerts/danger";

然后在要调用的函数上执行此操作

const error = new dangerAlert({ propsData: { text: "Error message" } });
error.$mount("#error");

但是它给我一个错误的说法

_components_Alerts_danger__WEBPACK_IMPORTED_MODULE_3__.default is not a constructor

因此,我不确定如何解决此问题或做我需要做的事情。我曾尝试使用Google搜索,但似乎找不到答案。

vue.js vue-component
1个回答
0
投票

导入的组件不是构造函数,它应该扩展构造函数并使用,应该使用Vue.extend()

Vue.extend()是一个类继承方法。它的任务是创建Vue的子类并返回构造函数。

所以代替这个

const error = new dangerAlert({ propsData: { text: "Error message" } });
error.$mount("#error");

使它像这样

const DangerAlertExtended= Vue.extend(dangerAlert);
const error = new DangerAlertExtended({ propsData: { text: "Error message" } });
error.$mount("#error");
© www.soinside.com 2019 - 2024. All rights reserved.