我正在尝试制作一个模板组件,以便以后在我的项目中使用。但是,我很难通过代码在想要的元素上显示它。
到目前为止,我的代码就是这样。
<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.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");