vue.extend,vue.directive,vue.component,mixins,extends使用。_Vue.js

上一篇: 长的和vue-cli差不多的React脚手... 下一篇:亲力亲为 vue 生命周期

vue.extend,vue.directive,vue.component,mixins,extends使用。

发布时间：2019-05-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vue.extend,vue.directive,vue.component,mixins,extends使用。，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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>`,
    data:function(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    }
})
//创建Profile实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下：

<p>Walter White aka Heisenberg</p>

Vue.component( id, [definition] )

*参数：

{string} id
{Function|Object}[definition]

*用法：

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

//注册组件，传入一个扩展过的构造器。
Vue.component('my-component',Vue.extend({/*...*/}))
//注册组件，传入一个选项对象（自动调用Vue.extend）
Vue.component('my-component',{/*...*/})
//获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component');

实例：

var Profile = Vue.extend({
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data:function(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    },
    created(){
        console.log('one');
    }
})

为了后面更好的使用Vue.extend()中的options，直接把上面示例中的一些选项提出来，这些选项其实就是前面所说的预设选项：

let baseOptions = {
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    }
}

这时可以这样使用：

let baseExtend = Vue.extend(baseOptions);

可以使用new关键字来声明这个构造器：

new baseExtend()

这个和new Vue()有点类似，除了我们预设的一些东西之外，Vue还给其预设了很多其它的东西。Vue的实例最终要挂载到一个元素上，那么Vue.extend也是一样，也需要挂载到一个元素上：

new baseExtend().$mount('#app');

尝试像Vue的实例挂载的方法：

let app = new baseExtend({
    el:'#app'
})

最终得到的效果是一样的。除此之外，还可以将其挂载到自定义的标签上，比如：

<custom-element><custom-element>
new baseExtend().$mount('custom-element')

Vue.extend的作用：
Vue.extend常和Vue的组件配合在一起使用。简单点说：vue.extend是构造一个组件的语法器，你给这个构造器预设一些参数，而这个构造器给你一个组件，然后这个组件你就可以用到Vue.component这个全局注册方法里，也可以在任意Vue模板里使用这个构造器。
基于上面的实例，咱们通过Vue.extend构建了一个baseExtend()构造器，这个构造器具有baseOptions设置的参数。
咱们先忽略上面这段描述，来看Vue.component()创建的组件：

Vue.component('base-component',baseOptions)//自动调用Vue.extend()
let app = new Vue({
    el:'#app'
})
<!--HTML-->
<div>
    <base-component></base-component>
</div>

如果我们把Vue.component()中的baseOptions换成前面已创建的扩展器baseExtend：

Vue.component('base-component',baseExtend)
//等同于
Vue.component('base-component',Vue.extend(baseOptions))
//等同于
Vue.component('base-component',baseOptions)

测试可以看到效果是相同的。
理解Vue.extend()和Vue.component()是很重要的。由于Vue本身是一个构造函数(constructor),Vue.extend()是一个继承与方法的类(class),参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并返回相应的构造函数。而Vue.component()实际上是一个类似于Vue.directive()和Vue.filter()的注册方法，它的目的是给指定的一个构造函数与一个字符串ID关联起来。之和Vue可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend().

extends

*类型：

Object|Function

*详细：

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用Vue.extend。这主要是为了便于扩展单文件组件。

*示例：

var Compa = {...}
//在没有调用Vue.extend时候继承CompA
var CompB = {
    extends:CompA,
}

 const extend = {
      data(){return{
        aaaa:2
      }},
      created(){
        console.log('extends')
      },
      methods:{
        abc(){
          console.log(1)
        }
      }
    }
    const extend1 = {
      created(){
        console.log('extends1')
      },
      extends:extend
    }
    const extend2 = {
      extends:extend1
    }
    new Vue({
      el:'#app',
      extends:extend2,
      created(){
        console.log('created')
        this.abc()
        console.log(this.aaaa)
      }
    })
    //extends
    //extends1
    //created
    //1
    //2

mixins

*类型：