Question

Vue.component('component-a', {
	template: '<h3>Hello world!</h3>'
})

new Vue({
  el: "#app",
  data: {
  	arr: []
    },
    methods: {
    	add(){
      	this.arr.push('component-a');
        console.dir(this.arr)
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component-a></component-a>
  
  <hr>
  <button @click="add">Add a component</button>
  <ul>
  <li v-for="component in arr"> {{ component }} </li>
</ul>
</div>

我想通过单击按钮在页面上多次插入组件，但不是插入此组件，而是插入了组件的名称。如何添加组件本身？

Answer 1

在您的代码中，双花括号不引用组件本身，而仅引用您用function drawChart(data) { // set the dimensions and margins of the graph // set the dimensions and margins of the graph var margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 400 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Initialize the links var link = svg .selectAll("line") .data(data.links) .enter() .append("line") .style("stroke", "#aaa") // Initialize the nodes var node = svg .selectAll("circle") .data(data.nodes) .enter() .append("circle") .attr("r", 20) .style("fill", "#69b3a2") // Let's list the force we wanna apply on the network var simulation = d3.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes .force("link", d3.forceLink() // This force provides links between nodes .id(function(d) { return d.id; }) // This provide the id of a node .links(data.links) // and this the list of links ) .force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength .force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area .on("end", ticked); }添加的字符串，因此仅显示该字符串。

如果您希望此字符串调用实际的组件，则可以使用dynamic components。

用this.arr.push('component-a');代替{{ component }}会达到我认为您想要的效果。

但是，如果您只打算添加一种类型的组件，我会考虑将v-for添加到组件标签本身中，如下所示：

<component :is="component"/>

Answer 2

使用component元素动态呈现您的组件。

用法非常简单：<component :is="yourComponentName"></component>

“：is”属性是必需的，它需要一个字符串（或组件定义）。然后，Vue将采用提供的字符串并尝试呈现该组件。当然，提供的组件需要首先注册。

您要做的就是将component标签添加为list标签的子元素：

<li v-for="component in arr">
  <component :is="component"></component>
</li>

Vue.component('component-a', {
  template: '<h3>Hello world!</h3>'
})

new Vue({
  el: "#app",
  data: {
    arr: []
  },
  methods: {
    add() {
      this.arr.push('component-a');
      console.dir(this.arr)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component-a></component-a>

  <hr>
  <button @click="add">Add a component</button>
  <ul>
    <li v-for="component in arr">
      <component :is="component"></component>
    </li>
  </ul>
</div>

通过单击按钮添加组件

2 个答案: