Vue的混合继承详解

目录
  • 混合继承实现的效果:
  • 一、继承
    • Vue.extend方法
    • ​extends 属性
  • 二、混合(mixins)
    • 合并规则
  • 总结

混合继承实现的效果:

A有一个data属性,和一个say方法

B有一个see方法和一个name属性

A继承B后,A除了有自己的一个data属性,和一个say方法,还有B的一个see方法和一个name属性

在C里混合AB后,C有自己的东西和A的一个data属性,和一个say方法,还有B的一个see方法和一个name属性

一、继承

Vue.extend方法

Vue.extend( Vue ComponentOptions ) 是全局方法,使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象(Vue ComponentOptions)。​

data 属性是特例,需要注意 - 在 Vue.extend() 中它必须是函数(工厂函数)

// 创建构造器ja
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')

​extends 属性

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

pageTwo.vue文件

<template>
    <div>
        <h3>Page Two</h3>
        <paging :total="total" :pageSize="pageSize" :sizeOptions="sizeOptions"/>
    </div>
</template>
<script>
    import PagingData from '../component/PagingData.vue'
    export default {
        // 实现继承
        extends: PagingData
    }
</script>

注:以上文件的paging是一个全局注册的自定义组件,PagingData也是组件,但没有注册而是通过继承将其内容给合并到了pageTwo里。

二、混合(mixins)

一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

合并规则

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。

1、数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

2、同名钩子函数(生命周期函数)将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

3、值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

继承(extends )也是这个合并的规则​

可以使用混合来实现多继承,混合不是用来实现继承的,把多个Vue ComponentOptions(Vue 可选择组件对象)合并起来​

形式:mixins: [合并组件1, 合并组件二,…]​

pageOne.vue文件

<template>
    <div>
        <h3>Page One</h3>
        <hr/>
        <paging @pageChangeEvt="cb" :total="total" :pageSize="pageSize" :sizeOptions="sizeOptions"/>
    </div>
</template>
<script>
    import PagingData from '../component/PagingData.vue'
    import PagingFunc from '../component/PagingFunc'
    export default {
        // extends: {PagingFunc, PagingData},
        // extends: [PagingFunc, PagingData],
        mixins: [PagingFunc, PagingData],
    }
</script>

注:以上文件的paging是一个全局注册的自定义组件,PagingData和PagingFunc也是组件,但没有注册而是通过混合将其内容给合并到了pageOne里。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • 详解Vue2.0组件的继承与扩展

    前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显示该内容",但是同时允许用户覆写为别的内容. <body> <div id=&qu

  • web项目开发VUE的混入与继承原理

    目录 混入 混入注意(重名情况) 局部混入 全局混入 定义及全局注册 调用 继承 混入和继承的区别 混入 将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可. 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data .methods.components等所有<script>中可以定义的代码. 混入注意(重名情况) 组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准; 组件中的 methods,comput

  • 详细聊聊Vue的混入和继承

    目录 前言 混入 混入注意(重名情况) 局部混入 全局混入 继承 混入和继承的区别 总结 前言 Vue中的混入(mixin)是一个比较简单的知识点.熟悉CSS预处理语言比如less.sass的开发者对mixin肯定很熟悉.Vue中的mixin几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) ). mixin是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子.属性等,当全局混入或者混入到组件后,V

  • Vue的混合继承详解

    目录 混合继承实现的效果: 一.继承 Vue.extend方法 ​extends 属性 二.混合(mixins) 合并规则 总结 混合继承实现的效果: A有一个data属性,和一个say方法 B有一个see方法和一个name属性 A继承B后,A除了有自己的一个data属性,和一个say方法,还有B的一个see方法和一个name属性 在C里混合AB后,C有自己的东西和A的一个data属性,和一个say方法,还有B的一个see方法和一个name属性 一.继承 Vue.extend方法 Vue.ext

  • Vue.js之mixins混合组件详解

    混合以一种灵活的方式为组件提供分布复用功能.混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被"混入"组件自己的选项中. 一.Mixins的基本用法 现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <div id="app"> <p>num:{{ num }}</p> <P><but

  • vue组件与复用详解

    一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ

  • petite vue的使用示例详解

    目录 题引: 特征及使用: 1. CDN引入: 2.module引入 3. 组件化 4. 模板组件 结尾: 题引: 这几天在公司没事做,于是上网看看有关vue的文章,忽然看到尤大大的一个文章:只有5kb大小的mini vue,好家伙,又整活了,这不得冲一冲嘛. 特征及使用: petite-vue体积更小,约5bk: 对渐进的增强更加的明显,特别是运用在服务端渲染的页面上更是便捷.系统看了一下,语法跟vue的语法绝大部分是一样了,除了增加了一些新的语法糖: 基于reactive进行响应式 peti

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • JS 面向对象之继承---多种组合继承详解

    这一次要讲 组合.原型式.寄生式.寄生组合式继承方式. 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.n

  • 基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • [js高手之路]原型式继承与寄生式继承详解

    一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; return new G(); } var obj = { name : 'ghostwu', age : 22, show : function(){ return this.name + ',' + this.age; } }; var obj2 = object( obj ); console.log(

随机推荐