vue这么动态引入vue文件？

mcck_hyj
  • 200

我需要在vue项目运行时引入新的vue文件，该文件是服务器生成的通过ajax请求回去的，请问如何实现这个功能？

javascriptnode.js
回复
阅读 6.1k
3 个回答
得票最新
坐死等吃
  • 172
✓ 已被采纳

额

那个。。刚注意到时.vue文件。。vue文件就不太可行了，因为vue文件本身时经过vue-loader等webpack处理编译过的，否则时没办法识别包括模板、样式、es6语法等问题。但是如果可以通过下面的方法来写vue实例，模板可以用render函数来写，然后动态挂载，应该就没问题了

再更新。。。

刚刚又看了vue官网介绍，runtime+Compiler，可以实现模板直接html不需要用render，楼主可以研究下
vue编译器
vue-el
理论上时可以实现的 参看vue官网api，Vue.extend介绍
我写的demo

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
    <button @click="dynamicMount">动态挂载vue</button>
    <div id="mount-point">
    </div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message:'Hello World!'
    },
    created() {
        this.dynamicMount = function() {
            let Profile = Vue.extend({
            template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
            data: function () {
                return {
                firstName: 'Walter',
                lastName: 'White',
                alias: 'Heisenberg'
                }
            }
            })
            // 创建 Profile 实例，并挂载到一个元素上。
            new Profile().$mount('#mount-point')
        }
    }
})
</script>
</body>
</html>
回复
changle
  • 45

vue-router有一个懒加载功能，你直接用js去解析vue文件是没可能的
但是你可以做到的事情是，在打包之后把代码分割成多块，需要的时候才加载

回复
wolfzwz
  • 142

那要看请求的这个文件有没有其它特殊的语法，如果只是html语法和css语法，vue语法，是没有问题的，如果这个请求文件的内容是一个组件，那就把文件的内容读出来直接赋值给页面script标签，或者把html代码直接赋值到vue.extend中的template变量就可以

回复
撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
宣传栏
60779