如何在从jquery动态添加的html中渲染vuejs组件

我在 html 中有一个从 jquery ajax 调用返回的 vuejs 组件，但它不渲染该组件。那么如何让vuejs从jquery渲染这个组件呢？

jquery 代码示例：

$.post(baseURL + "media", postData, function (data) {
      if(data.status == true) {
           $('#media_lib_app').html(data.view);
      }
 });

data.view 中返回的内容是：

<test-component></test-component>

但是当 data.view 添加到 html div 时，它不会渲染组件。

如果我理解正确的话，您会从 AJAX 调用中获取自定义组件的标签，并希望从中构建一个 Vue 组件。

所以假设这是你的<test-component>:

Vue.component('test-component', {
  template: "<p>I am the test component template</p>",
  methods: {
      // Component logic...
  }
});

现在，您可以在应用程序的某个位置进行 AJAX 调用：

$(document).ready(function() {
  var html = '<test-component></test-component>';
  var url = "https://jsonplaceholder.typicode.com/posts"; 
    
  $.get(url, function (data) {
    
    var res = Vue.compile(html)
    new Vue({
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount('#media_lib_app')
    
  }.bind(this));
})

您的组件安装点：

<div id="media_lib_app"></div>

有关 .compile 的更多信息：

https://v2.vuejs.org/v2/api/#Vue-compile https://v2.vuejs.org/v2/api/#Vue-compile

Note: Vue.compile()仅在完整版本中可用。

您可以在这里找到一个工作示例：

https://jsbin.com/motuvokeha/edit?html,js,输出 https://jsbin.com/motuvokeha/edit?html,js,output

希望这可以帮到你 ：）