如何解决如何在vue.js中创建组件并动态安装
有没有一种方法可以在模板中动态创建和安装组件。我尝试过,但是没有用。下面是代码。我已经在有关如何实现此目标的代码上发表了评论。
<template>
<v-container>
<v-row>
<v-col cols="12" sm="12" class="d-flex flex-row">
<v-btn color="success" @click="addField">Add Field</v-btn>
</v-col>
<v-col cols="12" sm="12" id="container">
mounts components here
</v-col>
</v-row>
</v-container>
</template>
<script>
import Vue from "vue";
export default {
methods: {
addField() {
//creates component
let newComponent = Vue.component("some-component",{
data() {
return {
name: "John"
};
},template: "<template><p>{{name}}</p></template>"
});
//insert component in template
newComponent.$mount("#container");
}
}
};
</script>
解决方法
是的。您可以使用<component is="nameOfYourComponent"/>
动态加载组件。
在codesandbox
当然,文档:https://vuejs.org/v2/guide/components-dynamic-async.html
,我不清楚您要实现的用例。
但是,也许您可以使用插槽(https://vuejs.org/v2/guide/components-slots.html)或动态和异步组件(https://vuejs.org/v2/guide/components-dynamic-async.html)来获得所需的内容
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。