渲染vue.js中的动态组件?

问题描述:

我试图通过使用设置超时伪造ajax调用来呈现vue.js中的动态组件。它应该注册一个新组件,然后将其设置在视图中!我正在使用vue.js 1.请告诉我一个解决方案,以便我能如何得到这个工作。渲染vue.js中的动态组件?

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>test dynamic components</title> 
 
</head> 
 
<body> 
 
\t 
 
\t <div v-component="{{currentView}}"></div> 
 

 

 
\t <script src="vue-v1.js"></script> 
 
\t <script> 
 
    //Create the 'default' component 
 
    Vue.component("default", { 
 
     template: '<div>This should be replaced (and will be in 2 seconds)</div>' 
 
    }); 
 

 
    //Create the parent ViewModel 
 
    var vm = new Vue({ 
 
     el: "body", 
 
     data: { 
 
      currentView: "default" 
 
     } 
 
    }); 
 

 
    //Pretend to load the data from the server 
 
    //This would actually be $.get("/url", data, function(){...}); 
 
    window.setTimeout(function() { 
 
     
 
     //Create the new component using the template we received 
 
     Vue.component("BoardFeed", { 
 
      template: '<div>Template returned from server, what I really want</div><br>And directives work too:<div v-repeat="items">{{$value}}</div>', 
 
      data: function() { 
 
       return { 
 
        items: [1, 2, 3] 
 
       }; 
 
      } 
 
     }); 
 
     
 
     //And then change the page to that component 
 
     vm.currentView = "BoardFeed"; 
 
    }, 2000); 
 
\t </script> 
 
</body> 
 
</html>

问题:

我使用Vue.js 1,我不能插我的组件的看法!我不认为使用v-component即使是再

,当你做两个小修改您的代码工作正常Vue.js 1使用:

  1. 使用<component :is="currentView"></component>包括的组件。在0.12.0之前,v-component已被删除。使用<div v-for="value in items">{{value}}</div>遍历数组。 v-repeat已在1.0中弃用。

这是一个工作JSFiddle