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. python中pyqt5的进度条--python实战(十)

    python太博大精深了,使用场景非常多.最近笔者一直使用PyQt5编一些小程序,顺便就把一些常用的东西列出来,做个记录和积累吧.进度条是非常常用的东西,今天用的时候,顺便温习了一下,这个东西自己感觉 ...

  2. scrapy和scrapy-redis的区别

    scrapy是一个python爬虫框架,爬取的效率极高,具有高度的定制性,但是不支持分布式.而scrapy-redis是一套基于redis库,运行在scrapy框架之上的组件,可以让scapy支持分布 ...

  3. Hadoop核心组件之YARN

    YARN概述 Yet Another Resource Negotiator:另外资源的协调者 通用的资源管理系统 为上层应用提供统一的资源管理和调度 操作系统级别的调度框架,可以让各种计算框架运行在 ...

  4. VMware CentOS7 安装

    一.软硬件准备 作者:小啊博 QQ:762641008 转载请声明:https://www.cnblogs.com/-bobo 1.准备Centos7镜像 软件:推荐使用VMwear,我用的是VMwe ...

  5. CentOS系统查看软件安装路径

    Linux系统一般都是命令行界面,对于安装的软件也是通过命令安装的.对于软件包更新和卸载等有时候需要查看检查是否有改软件,软件安装存储的路径对于修改配置文件等是必要的.那么怎么查看软件安装路径呢?小编 ...

  6. 织梦cms列表页获取标签

    <!-- 标签 --> [field:id runphp='yes'] global $cfg_cmspath; $tags = GetTags(@me); $revalue = ''; ...

  7. FFmpeg(一)

    1. FFmpeg分为3个版本:Static.  Shared. Dev 前两个版本可以直接在命令行中使用.包含了三个exe:ffmpeg.exe,ffplay.exe,ffprobe.exe Sta ...

  8. php获取文件的文件名(误区)

    文件路径:$path = '/home/files/1234.jpg'; php获取文件名,大家应该是轻车熟路了,写个小函数,分分钟 <?php //获取文件名 function get_fil ...

  9. iOS 设备数据管理工具 iMazing v2.10.3 绿色便携版

    iMazing 是一款可以帮助用户管理 iOS 设备的软件,功能远远超出 iTunes.iMazing 连接你的 iOS 设备(iPhone. iPad 或 iPod)相连,使用起来也非常的方便.你可 ...

  10. HTML5 + WebGL 实现的垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存.分类投放和分类搬运,从而转变成公共资源的一系列活动的总称.分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用.垃圾在分类储存阶段属于公众的私 ...