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】【jenkins】自动化运维七 整合sonarqube代码审查

    1.安装插件:SonarQube Scanner for Jenkins 插件安装教程参考:https://www.cnblogs.com/jxd283465/p/11542680.html 2.So ...

  2. golang1.13中重要的新特新

    本文索引 语言变化 数字字面量 越界索引报错的完善 工具链改进 GOPROXY GOSUMDB GOPRIVATE 标准库的新功能 判断变量是否为0值 错误处理的革新 Unwrap Is As gol ...

  3. Linux6.x 更换国内比较快的yum源-通用版

    ----------更换国内比较快的yum源----------- ----------163--------- cd /etc/yum.repos.d mv CentOS-Base.repo Cen ...

  4. Linux 安装CentOS7操作系统

    作者:小啊博 QQ:762641008 转载请声明:https://www.cnblogs.com/-bobo 1.安装操作系统 开启虚拟机后会出现以下界面 Install CentOS 7 安装Ce ...

  5. linux查看系统的一些版本号指令

    1.查看系统 [root@iZbp1eoiap1e1jb6pvo390Z ~]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch ...

  6. Redis系列---操作命令及数据类型

    本章将简单介绍下,Redis里面常用的数据类型以及我们常用到的一些命令,let's go 准备环境: Redis  详细见上一个章节 我们接下来操作的命令用的是Redis自带的客户端工具,在安装red ...

  7. mysql创建用户和权限管理

    一 权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建 ...

  8. 设置Activity全屏的方法:

    1)代码隐藏ActionBar 在Activity的onCreate方法中调用getActionBar.hide();即可 2)通过requestWindowFeature设置 requestWind ...

  9. 详解计算机中的Byte、bit、字、字长、字节

    最近突然有同事问我,关于计算机中的计量单位大B和小b的区别,以及KB到GB之间的换算问题,我当时觉得这问题简单,大B是 byte,小b是bit,但是想到他俩之间的换算时,一时有些想不起来具体是1Byt ...

  10. SDN网络IPv6组播机制支持实时视频业务海量用户扩展

    以 OpenFlow 技术为核心的软件定义网络(SDN)框架具有集中控制的功能能够自己感知网络拓扑的变化,在细粒度的路径选择.接入控制.负载均衡方面有着天然的优势,为 IPv6 组播功能的实现提供了好 ...