vue.extend的使用

vue.extend常使用场景

当需要在某一个场景内要使用一个新功能，该新功能只是在某组件上作一些新的逻辑新功能即可，选择用Vue.extend。

注意：需要在项目下新建文件vue.config.js

module.exports = {
    runtimeCompiler: true
  }

否则会报错

You are using the runtime-only build of Vue 
where the template compiler is not available.
 Either pre-compile the templates into render functions, 
 or use the compiler-included build.

最后还需要重启项目！！！

方式 1

定义组件构造器

import Vue from 'vue'
const Profile=Vue.extend({
    template:'<p>{{firstName}} {{lastName}} 组合 {{alias}}</p>',
    data() {
        return {
            firstName: 'Yan',
            lastName: 'Hello',
            alias: '最后'
        }
    }
})
export default Profile

组件中使用

<div id="mount-point"></div>

import Profile from '../service/vueExtend'

    mounted(){
        new Profile().$mount('#mount-point')
    }

方式 2

Torst.vue组件

<template>
    <div >hello,nice to meet you</div>
</template>
<script>
export default {
    name:'torst',
    data(){
        return{
            msg:'HELLO----'
        }
    }
}
</script>

vueExtend.js文件

import Torse from '@/components/Torst'
const Torst=Vue.extend(Torse)
//......Profile相关代码
export {
    Profile,
    Torst
}

testA.vue组件中使用

<div id="torse"></div>

import {Profile,Torst} from '../service/vueExtend'
mounted(){
	new Torst().$mount('#torse')
}