vue这么动态引入vue文件?

mcck_hyj
  • 200

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

回复
阅读 6.1k
3 个回答

那个。。刚注意到时.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>

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

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

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