Question

我对如何创建动态组件有疑问，而不是通过标签<component :is=''>来创建，如果没有，则该组件在DOM中不存在，并通过javascript将其插入。

与在jquery中一样，添加$("body").append("<div class="modal"></div>")，以添加新的模式

代码：https://codesandbox.io/embed/vue-template-5cx5l?fontsize=14

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

父母双亲

<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>

组件模式

<template>
  <div>MODAL {{num}}</div>
</template>

<script>
export default {
  name: "modal",
  props: ["num"],

  data: function() {
    return {};
  },

  methods: {}
};
</script>

Answer 1

在组件数据中创建一个数组，并为数组中的每个项目显示一个模态

HelpingClass

创建动态组件VUE

jQuery

VUE

1 个答案: