Question

我知道new Vue({el: "#app"})可以呈现整个#app html，如何new Vue(el: "html with vue component")

这是我的代码：

<div id="app">  
</div>
<script>
  Vue.component("c", {template: `<div>is c</div>`})
  new Vue({el: "#app"})
  // after init app
  $("#app").append(parseVueComponent(`<c></c>`))
  // I expect result is
//   <div id="app">
// <div>is c</div>
// </div>
  // how to implement parseVueComponent
</script>

Answer 1

简单：执行Vue.component()时，第一个参数是可重用组件的名称。然后，您可以将该名称用作HTML标记！因此，如果我们有Vue.component('my-component', { . . . })，那么我们所要做的就是：

<div id="app">
    <my-component></my-component>
</div>

Answer 2

为什么要解析整个组件？这是Vue的工作。如果你想要的只是用伴随的html渲染文本，那么你可以使用v-html指令解析并显示html和文本。这是一个小片段，可以给你一个想法：

data() {
   return {
     textWithHTML : '<div id="unique">my text</div>'
 }
}

现在使用/ render / parse，我们将在template

中使用v-html

<template>
   <div v-html="textWithHTML"></div>
</template>

Answer 3

我找到了解决方案，当我在js中添加vue组件标记时，我再次使用@Entity @Table(name = "requisition_details") public class RequisitionDetail { @Id private Long id; @ManyToOne(cascade = CascadeType.ALL) @Column(name = "requisition_id") private Long requisitionId; @OneToOne @Column(name = "product_id") private Long productId; private int quantity; @Column(name = "unit_price") private Double unitPrice; @Column(name = "total_price") private Double totalPrice;，它将转换所有当前存在的vue组件标记，以下是我的代码：

new Vue(el: "#app")

如何将vue组件的html转换为纯html

3 个答案: