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. adb命令整理(持续整理)

    用到过的adb命令都整理下来,省的一直百度,还不一定能找到合适的答案 获得正在运行app的包名 :adb shell dumpsys window | findstr mCurrentFocus 1. ...

  2. Spring 梳理-运行时动态注入bean

    动态注入的方法 使用占位符 使用Spring表达式

  3. Python基础(十三)

    今日主要内容 闭包 装饰器初识 标准装饰器 一.闭包 (一)什么是闭包 闭包:内层函数调用外层函数的变量就是闭包(不能是全局变量) def func1(): a = 10 def func2(): p ...

  4. 体验StartOS

    旧电脑,原来使用的是win xp.随着win及其支持打软件打“成长”,电脑运行越来越慢了.一个操作需要很长的时间等待,终于,失去了耐心,换了新的电脑. 旧电脑弃置多年,留之无用,弃之可惜.偶发奇想,换 ...

  5. 数据库系统概论——从E-R模型到关系模型

    E-R模型和关系模型都是现实世界抽象的逻辑表示 E-R模型并不被 DBMS直接支持,更适合对现实世界建模 关系模型是 DBMS直接支持的数据模型 基本 E-R图中的元素包括实体集.联系集.属性 椭圆框 ...

  6. 记录一次redis cpu异常升高的排插思路

    好久没有写博客  现在重新捡起来  记录工作中遇到的问题  方便以后在遇到类似的问题也有一个参考. 背景:有一天生产服务器redis  cpu 频繁报警    单核cpu 所以在想是不是业务量上来了. ...

  7. Java 学习笔记之 线程interrupted方法

    线程interrupted方法: interrupted()是Thread类的方法,用来测试当前线程是否已经中断. public class InterruptThread extends Threa ...

  8. Java 学习笔记之 实例变量与线程安全

    实例变量与线程安全: 不共享数据: public class NoSharedThread extends Thread { private int count = 5; public NoShare ...

  9. ELK 学习笔记之 elasticsearch elasticsearch.yml配置概述

    elasticsearch.yml配置概述: 设置集群名字 cluster.name 定义节点名称 node.name 节点作为master,但是不负责存储数据,只是协调. node.master: ...

  10. js实现烟花效果

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