VueJs 动态模板渲染答案

【问题标题】：VueJs Dynamic template renderingVueJs 动态模板渲染
【发布时间】：2020-01-01 21:54:30
【问题描述】：

这是一个众所周知的问题，当您将 HTML 附加到 DOM 时，包含其他 vue 组件，可以选择仅将它们作为 HTML 插入，也可以在 html 中渲染组件。但是我找不到将它附加到同一个父级的解决方案，它表现为一个单独的实例。

我已经创建了一个我想要实现的示例。

<div id="app">
  <button @click="clicked">
      Load greeting
  </button>
  <div id="inserted" v-html="internalHtml"></div>

  <!-- <greeting @clicked="greetingClicked"></greeting> -->
</div>

const Greeting = Vue.component('greeting', {
  template: '<p>Hi, dude! <br/><button @click="clicked">Click me!</button> </p>', 
  methods: {
    clicked() {
        this.$emit('clicked');
    }
  }
});

const LoadedHtml = 'This is a greating: <greeting @clicked="greetingClicked"></greeting>';

var vm = new Vue({
  el: '#app',
  data() {
    return {
            internalHtml: ''    
    }
  },
  methods: {
    clicked() {
         this.internalHtml = LoadedHtml;
       this.$nextTick(function(){
            new Vue({el: '#inserted'} );
       });
    },
    greetingClicked() {
        alert('Boo!');
    }
  }
});

小提琴：https://jsfiddle.net/relaximus/znh3svy7/29/

警报“嘘！”单击“单击我”后必须出现。我会很感激任何想法。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

可以通过动态组件来实现：https://vuejs.org/v2/guide/components.html#Dynamic-Components

使用您的示例：https://jsfiddle.net/dqws96mr/1/

const Greeting = Vue.component('greeting', {
  template: '<p>Hi, dude! <br/><button @click="clicked">Click me!</button> </p>', 
  methods: {
    clicked() {
        this.$emit('clicked');
    }
  }
});

var vm = new Vue({
  el: '#app',
  data() {
    return {
            myDynamicComponent: null
    }
  },
  methods: {
    clicked() {
         this.myDynamicComponent = 'greeting'
    },
    greetingClicked() {
        alert('Boo!');
    }
  }
});

【讨论】：