有没有办法使用插值把手内的文本强制编译或渲染组件

Question

我正在使用一些第三方 Vue 组件，它允许我设置一组 Html 元素的标题，并且文本呈现在图例标签内。

据我了解，Vue插值文本只能做少量操作。

我想知道是否有办法让我在 vue 插值车把内渲染 vue 自定义组件。

例如在我的 vue 组件的模板中......

<template>

  <div class="row">
     <legend>{{ Text_Or_CustomVueComponentTag }} </legend>
     ...
  </div>
</template>

我可以做些什么来在把手中呈现我自己的自定义 组件 吗？

Answer 1

其实，我不认为这是一种错误的方式（主要是基于选项）。而您发布的示例是使用 Mustache，它将替换一个 dom 元素的 value 属性。

正如Vue Guide所说：

mustache 标记将替换为 msg 属性的值 在相应的数据对象上。也将随时更新 数据对象的 msg 属性发生变化。

虽然我们可以通过v-html 指令直接更新innerHTML。但是我认为你不会得到任何好处，如果使用v-html，为什么不直接使用你的子组件。

Vue.component('child', {

  template: '<div><span style="background-color:green">{{ updatedArray }}</span><div style="background-color:red">{{computedArray}}</div></div>',
  props: ['updatedArray'],
  computed: {
    computedArray() {
      if(this.updatedArray.item.length > 0) {return this.updatedArray}
      else {return "other item"}
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      testArray: {
        'item': 'test',
        'prop1': 'a'
      },
      childComponent1: '<div>Nothing</div>',
      childComponent2: '<div>Nothing</div>'
    }
  },
  methods:{
    resetArray: function() {
      this.testArray['item'] += this.testArray['prop1'] + 'b'
      this.childComponent1 = this.$refs.test.$el.innerHTML
      setTimeout(()=>{this.childComponent2 = this.$refs.test.$el.innerHTML}, 0)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button v-on:click="resetArray()">Click me</button>
<child ref="test" v-bind:updated-array="testArray"></child>
<div v-html="childComponent1"></div>
<div v-html="childComponent2"></div>
</div>