Vue基础知识之Vue.extend

vue

发布日期: 2022-01-04

更新日期: 2023-04-17

文章字数: 906

阅读时长: 3 分

阅读次数:

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，相比常用的 Vue.component 写法，使用 Vue.extend 步骤要繁琐一些。但在一些独立组件开发场景中，还是用的到Vue.extend + $mount 这对组合的。

官方定义

Vue.extend( options )

参数：
- {Object} options
用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

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

// 创建构造器
var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',//外层div可以去掉，但是必须要嵌套其他标签，不可直接  template: “111”, 应template: "<div>1111</div>"
    data: function () {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
        }
    }
})

// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下：

<p>Walter White aka Heisenberg</p>

可以看到，extend 创建的是一个组件构造器，而不是一个具体的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上。最终还是要通过Vue.components注册才可以使用的。

<div id="app">
    <h1>{{msg}}</h1>
    <Profile></Profile>
</div>
<template id="extend">
    <div>
        <p>{{ProfileMsg}}</p>
    </div>
</template>

// 创建构造器
var Profile = Vue.extend({
    template: '#extend',
    //data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
    data: function() {
        return {
           ProfileMsg:"extend"
        }
    },
})

//注册组件到全局，要放到new Vue()前面，不然无法生效
Vue.component("Profile", Profile)

//创建vue
var vue = new Vue({
    el: '#app',
    components: {
        // Profile,//使用全局组件
    },
    data: {
        msg: 'Vue是最简单的',
    },
})

结果如下：

<h1>Vue是最简单的</h1>
<p>extend</p>

在实例化extends组件构造器时，传入属性必须是propsData，而不是props。另外，无论是Vue.extend还是Vue.component里面的data定义都必须是函数返回对象，如Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象，如new Vue({data: {}})，但会全局生效;

<div id="mount-point"></div>
<template id="extend">
    <div>
        <p>{{ProfileMsg}}</p>
    </div>
</template>

// 创建构造器
var Profile = Vue.extend({
    template: '#extend',
    props: ["ProfileData"],
    //data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
    data: function() {
        return {
           ProfileMsg:"extend"
        }
    },
    mounted() {
        console.log(this.ProfileData) //hello,Vue!
    },
})

// 创建 Profile 实例，并挂载到一个元素上。
//请注意，在市里话extends组件构造器时，传入属性的必须是propsData，而不是props
//propsData 创建实例时传递 props。主要作用是方便测试。
new Profile({
    propsData: {
        ProfileData: "hello,Vue!"
    }
}).$mount('#mount-point')