Vue混入mixins

Vue官网上介绍:

混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

虽然平时没用过,但是这些方法对于想要开发一个好项目是非常有用的。

混入其实很简单,就是你mixins跟页面的初始化一样,有生命周期、有方法、有数据有过滤器等,反正页面有的mixins都有。

创建plugin.js:

export default {
    install:(Vue) => {
 
    }
}

main里面引入:

import plugin from './utils/plugin'
Vue.use(plugin);

之前说过了Vue.use,我们把接下来注册全局的方法都写在install里面。

全局注入:

Vue.mixin({
    data(){
        return{
            minData: 600,
            faMin: 1000
        }
    },
    mounted(){
        console.log('mixin mounted');
    },
    methods: {
        minMeth(){
            console.log('mixin methods minMeth');
        },
        conFaMin(){
            this.faMin = this.faMin + 500;
            console.log(this.faMin);
        },
        common(){
            console.log('mixin methods common');
        },
        minAlert(){
            this.faMin = this.faMin + 100;
            alert(this.faMin)
        }
    }
});

页面中:

data(){
  return{
    faMin: 700
  }
},
mounted(){
  this.minMeth();
  this.conFaMin();
  console.log(this.minData)
  console.log(this.faMin)
  this.common();
},
  methods: {
      common(){
          console.log('father methods common');
      },
faAlert(){
 this.faMin = this.faMin + 100;
 alert(this.faMin)
}
  }
<p @click="faAlert">父组件</p>
<p @click="minAlert">min组件</p>

对照着输出一个一个看,很容易理解混入的规则,生命周期是混入的先调用再调用父组件的,对象的比如methods等如果冲突就是以父组件的为主。

两个点击方法也表明,两者的数据是共享的。不过在不同父组件之间,并不能通过混入通信,mixins最大的作用就是把全局确定需要用到的方法或者是数据提取出来封装。甚至可以替代一小部分的vuex。

上面是全局混入,mixins还可以局部混入,在页面里面引入:

import mixins from '@/utils/plugin'

使用:

mixins: [mixins]

上面时候使用全局什么时候选择局部,这就要看项目的情形了。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现一个Promise之基础、异步

    其实跟着promise a+一步一步,按照顺序实现一个promise并不难,今天先实现最简单的promise和异步resolve。本来想全部一次性写完,想想还是...

    wade
  • HashMap初始化大小的选择

    我个人理解是这样的,当场景中如果装载数量明确的时候,为避免HashMap因resize而引起的不必要的开销,从而一定程度上可以提高你的性能。所以我们今天来讨论一...

    wade
  • Express简单起一个本地服务接口

    有时候我们开发过程中,需要一个接口调试,但是又不想很麻烦的要一个后台,就想很快的简单的有一个接口。今天分享使用node的express很简单的起一个服务。当然,...

    wade
  • CPC(representation learning with contrastive predctive coding)

    摘要: 监督学习在很多应用方面有了巨大的进步,但是非监督学习却没有如此广的应用,非监督学习是人工智能方面非常重要也非常具有挑战性的领域。这篇论文提出了 cons...

    用户1908973
  • idea中使用scala运行spark出现Exception in thread "main" java.lang.NoClassDefFoundError: scala/collection/Gen

    idea中使用scala运行spark出现: Exception in thread "main" java.lang.NoClassDefFoundError...

    hbbliyong
  • webpack的运行机制详解

    webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构...

    前端迷
  • RDD和DataFrame转换

    在利用反射机制推断RDD模式时,需要首先定义一个case class,因为,只有case class才能被Spark隐式地转换为DataFrame。

    羊羽shine
  • Webpack 详解

    webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构...

    程序员宝库
  • Dart的语法详解系列篇(四)-- 泛型、异步、库等有关详解九、泛型(Generics)十、库和可见性十一、异步支持十二、Isolates十三、生成器(Generators)十四、类型定义十五、元数据

    上一篇主要讲了Dart的类与函数,由于内容有太多,我就把剩下的内容分开写一篇文章。 这一篇我们讲Dart的泛型、异步、库等有关详解,内容较多,希望大家可以耐心...

    AWeiLoveAndroid
  • Spark2.0学习记录

    小勇DW3

扫码关注云+社区

领取腾讯云代金券