创建动态组件 VUE
[英]create dynamic components VUE
问题描述
I have a doubt on how to create dynamic components, and not by the label <component:is=''> , if not, this component does not exist in the DOM, and through javascript insert it.
我对如何创建动态组件有疑问，而不是通过 label <component:is=''> ，如果没有，则该组件在 DOM 中不存在，并通过 javascript 插入。
As in jquery add a $("body").append("<div class="modal"></div>") , to add a new modal如 jquery 添加一个$("body").append("<div class="modal"></div>") ，添加一个新的模态
Example: https://jsfiddle.net/yu9oca2n/示例： https://jsfiddle.net/yu9oca2n/
Code: https://codesandbox.io/embed/vue-template-5cx5l?fontsize=14代码： https://codesandbox.io/embed/vue-template-5cx5l?fontsize=14
JQuery JQuery
code example JQuery代码示例 JQuery
$("#button").click(function() { $("#modals").append("<div class='modal'>modal</div>"); });
<:doctype html> <html> <head></head> <body> <div id="modals"></div> <hr> <button id="button">add input tag</button> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
VUE VUE
Componet Parent组件父级
<template>
<div>
<p>Hello</p>
<hr>
<a @click="insertModal">Insert Modal</a>
<hr>
<modal num="1"></modal>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
methods: {
insertModal() {
/**
* How to do so that when you enter here,
* add one more modal, without putting this in a list,
* because this modal can be called from anywhere on the web
*
* MODAL : <modal num="_x_" @clickEvent="eventClick"></modal>
*/
// ??
}
},
eventClick() {
/** modal event click */
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Component modal组件模态
<template>
<div>MODAL {{num}}</div>
</template>
<script>
export default {
name: "modal",
props: ["num"],
data: function() {
return {};
},
methods: {}
};
</script>
1 个解决方案
解决方案1
0 2019-11-03 18:27:19
Create an array in component data and show a modal per every item in array在组件数据中创建一个数组，并为数组中的每个项目显示一个模式
<template>
<div>
<p>Hello</p>
<hr>
<a @click="insertModal">Insert Modal</a>
<hr>
<modal v-for="num in modals" :num="num" :key="num" @clickEvent="eventClick($event, num)"></modal>
<modal num="1"></modal>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
data() {
return {
modals: [],
};
},
methods: {
insertModal() {
this.modals.push(this.modals.length)
}
},
eventClick($event, modalNumber) {
/** modal event click */
}
};
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.