VueJS 进程组件或使用函数的 HTML

Question

>我从 VueJS 文档中了解了它是如何工作的：

<div id="components-demo">
 <button-counter></button-counter>
</div>

还有这个：

<div id="app">
  <a v-on:click="loadElement(request, etc)">Load</a>
</div>

有没有办法从函数中编写等效项并让 Vue 拾取它？ 例如：

<div id="app">
  {{ writeComponent('component-name', etc) }}
  or
  {{ writeElement('loadElement') }} <!-- which then writes the component above -->
</div>

这样做的原因是，在这种情况下，可能需要编写相当多的组件，并且用HTML编写它将很麻烦。

Answer 1

您可以使用如下所示的渲染函数：

Vue.component('button-counter', {
  template: '<span class="bc">bc</span>'
})
new Vue({
  el: '#app',
  data: {
    request: 'req!',
    etc: 'etc!',
    buttonCounters: []
  },
  methods: {
    loadElement(r, e) {
      console.log('loadElement', r, e);
      this.buttonCounters.push(r);
    }
  },
  render(h) {
    let bcs = this.buttonCounters.map(bc => h('button-counter'));
    
    let loadLink = h('a', {on: {"click": ($event) => { this.loadElement(this.request, this.etc)}}}, ["Load"]);
    return h('div', {attrs: {"id": "app"}}, [loadLink, " ", ...bcs])
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app"></div>

虽然可以通过常规模板和v-for实现相同的目的：

Vue.component('button-counter', {
  template: '<span class="bc">bc</span>'
})
new Vue({
  el: '#app',
  data: {
    request: 'req!',
    etc: 'etc!',
    buttonCounters: []
  },
  methods: {
    loadElement(r, e) {
      console.log('loadElement', r, e);
      this.buttonCounters.push(r);
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
 <a v-on:click="loadElement(request, etc)">Load</a>
 <button-counter v-for="(bc, index) in buttonCounters" :key="index"></button-counter>
</div>