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. XSS攻击-原理学习

    本文优先发布于简书https://www.jianshu.com/p/04e0f8971890 1.百度百科XSS,跨站脚本攻击(Cross Site Scripting)缩写为CSS,但这会与层叠样 ...

  2. Linux常用命令大全(全全全!!!)

    Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短 ...

  3. 这个注册的 IP 网络都不通了,Eureka 注册中心竟然无法踢掉它!

    本文导读: 微服务技术架构选型介绍 k8s 容器化部署架构方案 Eureka 注册中心问题场景 问题解决手段及原理剖析 阅读本文建议先了解: 注册中心基本原理 K8s(Kuberneters)基本概念 ...

  4. 利用Python进行数据分析:【Matplotlib】

    一.简单介绍Matplotlib 1.Matplotlib是一个强大的Python绘图和数据可视化的工具包2.安装方法:pip install matplotlib 3.引用方法:import mat ...

  5. pt-archiver归档数据 源库和目标库是否会出现不一致

    背景 归档的表在源库和目标库都要存在 pt-archiver归档表的场景有:不删原表数据,非批量插入目标库:不删原表数据,批量插入目标库:非批量删除原表数据,非批量插入目标库:批量删除原表数据,批量插 ...

  6. js 判断字符串是否存在某个字符串

    可使用String和Regexp对象的相关方法进行处理,如下 一.String对象方法 1.使用indexOf()方法,返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则 ...

  7. Dockerfile 构建镜像

    一.使用dockerfile构建镜像 基本结构: a.设置基础镜像 当前镜像继承于的基础镜像 FROM centos:latest  b.设置维护者信息 没有固定格式  c.设置需要添加到容器中的文件 ...

  8. 【JavaScript】 控制自适应高度

    <iframe src="需要连接的iframe地址" id="iframepage" name="iframepage" frame ...

  9. Aria2 1.35.0,更新,测试,发布

    在上一篇: 有哪些便宜还好用的东西,买了就感觉得了宝一样? 结尾提到了Tatsuhiro Tsujikawa的aria2计划在10月更新一个新的版本 今天趁着雨后明月挂天,开始了简单的更新 虽然在半年 ...

  10. java中的Collection和Collections

    Collection是集合类的上级接口,继承他的接口主要有Set和List. Collections是针对集合类的一个帮助类,他提供一系列静态方法实现对各种集合的搜索.排序.线程安全化等操作.