Question

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

据我所知，Vue插值文本只能进行少量操作。

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

E.g。在我的vue组件的模板中......

<template>

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

我可以做什么来在把手内部渲染我自己的自定义组件？

Answer 1

实际上，我并不认为这是一种错误的方式（主要是基于选项）。你发布的样本是使用 Mustache ，它将替换一个dom元素的value属性。

正如Vue Guide所说：

mustache标记将替换为msg属性的值在相应的数据对象上。每当它都会更新数据对象的msg属性更改。

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

＆＃13;

v-html

＆＃13;

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

＆＃13;

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

1 个答案: