vue-class-component提供了mixinshelper函数,以类样式的方式使用mixins。通过使用mixins帮助程序,TypeScript可以推断mixin类型并在组件类型上继承它们。

声明mixin的示例:

// mixin.js
import Vue from 'vue'
import Component from 'vue-class-component' // You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
mixinValue = 'Hello'
}

使用mixin的示例:

import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.js' // Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin) {
created () {
console.log(this.mixinValue) // -> Hello
}
}

vue-class-component使用Mixins的更多相关文章

  1. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  2. vue之component

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 el 这样根实例特有的选 ...

  3. Vue dynamic component All In One

    Vue dynamic component All In One Vue 动态组件 vue 2.x https://vuejs.org/v2/guide/components-dynamic-asyn ...

  4. vue & child component & props

    vue & child component & props vue pass data to child component https://vuejs.org/v2/guide/co ...

  5. Vue.js——component(组件)

    概念: 组件(Component)是自定义元素. 作用: 可以扩展HTML元素,封装可重用的代码. <div id="myView"> <!-- 把学生的数据循环 ...

  6. Vue中的“混合”——mixins使用方法

    混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...

  7. vue里extend、mixins、extends的区别

    1.extend Vue.extend使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. // Vue.extend // 创建构造器 var Profil ...

  8. vue19 组建 Vue.extend component、组件模版、动态组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [Vue] Use Vue.js Component Computed Properties

    You can add computed properties to a component to calculate a property on the fly. The benefit of th ...

  10. [Vue] Import component into page

    Components are one of the most powerful features of Vue. Let's take a look at how to write our first ...

随机推荐

  1. 【linux】【Go】Centos7安装go1.13环境

    前言     Go(又称Golang)是Google开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言. 罗伯特·格瑞史莫(Robert Griesemer),罗勃·派克(Rob Pi ...

  2. 开源流媒体Red5-编译和部署

    源码下载地址:https://github.com/Red5/red5-server 使用工具:IntelliJ IDEA 下载源码后直接用IDEA打开,等待全部加载完成后 编译看是否报错,应该没什么 ...

  3. 第六届蓝桥杯java b组第四题

    第四题 两个整数做除法,有时会产生循环小数,其循环部分称为:循环节. 比如,11/13=6=>0.846153846153….. 其循环节为[846153] 共有6位. 下面的方法,可以求出循环 ...

  4. 深度学习论文翻译解析(五):Siamese Neural Networks for One-shot Image Recognition

    论文标题:Siamese Neural Networks for One-shot Image Recognition 论文作者: Gregory Koch   Richard Zemel Rusla ...

  5. 利用Python制作二维码

    利用简单的Python代码制作二维码 一.制作工具 安装Python环境 + PyCharm编译器. 二.电脑系统 本人win10 + Python3.7.0 + PyCharm. 三.写代码前先下载 ...

  6. 推荐5款自学手机APP,请低调收藏,让你变得越来越优秀

    现在的手机APP真的是太多了,但里面的功能同类性又非常大,很难找到实用并且符合要求的APP.接下来就为小伙伴们推荐5款非常实用的APP软件,保证你会爱不释手,轻松秒变手机达人. 1.清爽视频编辑器 一 ...

  7. TypeScript中使用getElementXXX()

    如果只是看解决方法,可以直接跳到第二小节 简述 Angular 1.x版本是用JavaScript编写的,我们在百度Angular经常会搜索到AngularJS,并不是JavaScript的什么衍生版 ...

  8. 链表常见的题型(java实现)

    链表是面试中最常见的一种题型,因为他的每个题的代码短,短短的几行代码就可以体现出应聘者的编码能力,所以它也就成为了面试的重点. 链表常见的操作有1.打印链表的公共部分,2.删除链表的倒数第K个节点,3 ...

  9. phpexcel 导出方法

    Vendor("PHPExcel.PHPExcel"); Vendor("PHPExcel.PHPExcel.IOFactory"); Vendor(" ...

  10. 【博客美化】添加github图标

    <a href="https://github.com/cai3231" target="_blank"> <img style=" ...