欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue.extend的使用

程序员文章站 2022-06-27 13:47:12
...

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.

vue.extend的使用

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

方式 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')
}
相关标签: Vue2.0 vue