时间戳

首页 > 解决方案 > VueJs 动态模板渲染

vue.js - VueJs 动态模板渲染

问题描述

这是一个众所周知的问题，当您将 HTML 附加到包含其他 vue 组件的 DOM 时，可以选择仅将它们作为 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.jsvue-component

解决方案

您可以通过动态组件来实现这一点：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!');
    }
  }
});

推荐阅读