Vue -- Mixin

LeviDing 发布于2019-08-21 11:53 / 2430人阅读

摘要：有两个非常相似的组件，他们的基本功能是一样的，可以局注册一个混合，影响注册之后所有创建的每个实例，这就是。全局下注册比如在构建的项目中，中定义了一个并且挂载在实例上，那么在实例下的每个组件都会在挂载的时候执行一次这个方法，输出多次

mixins

mixin: 有两个非常相似的组件，他们的基本功能是一样的，可以局注册一个混合，影响注册之后

所有创建的每个 Vue 实例，这就是mixin。

Mixin对编写函数式风格的代码很有用，一般情况下不会改变函数作用域外部的任何东西，输入相同，得到的结果也一定相同。

基础用法

新建一个mixin.js 文件，

 minix.js
  
 export const myminix= {
       data(){
           return {
           }
       },
       mounted(){
          this.sayhello();
       },
       created(){

       },
       methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
       }
}

一个简单的方法，在组件被挂载后输出 “hello”,

然后在想要使用这个公共方法的组件中引入进去。

other.vue

script:

export default {
 mixins:[myminix],
}

这样引入后的效果，就是在other的组件中，同样加入了sayhello() 方法

other.vue

script:

export default {
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
}

//output  "hello from myMinix"

在other 组件被挂载后，输出hello from myMinix,

冲突

到这里，会有一个问题，如果other.vue 本身也有同样是操作挂载在mounted 上，到底谁会先执行，

other.vue

script:

export default {
    mixins:[myminix],
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from other instance!");
           }
}

//output  "hello from myMinix"
//output  "hello from myMinix"

输出了两次一样的结果，都来自other 组件，第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayhello()函数。

全局下注册minix

比如在 vue-cli 构建的项目中，main.js 中定义了一个minix,并且挂载在vue 实例上，

 Vue.mixin({
      mounted() {
         console.log("hello from other");
      }
 })

 new Vue({
    

  })

那么在 Vue 实例下的每个组件都会在挂载的时候执行一次这个方法，输出多次 “hello from other”

云服务器 GPU云服务器 Mixin Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87249.html

【Vue原理】Mixin - 白话版

摘要：而我觉得现在出一个白话版，是让大家有兴趣去研究源码的时候，可以提前理清一下思路。相当于封装，提取公共部分。显然，今天我不是来教大家怎么用的，怎么用看文档就好了，我是讲解生命的真谛内部的工作原理。而这个不会合并，直接替换掉整个选项写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版...

CollinPeng 2019-08-23 18:25 评论0 收藏0
JS每日一题: Vue中mixin怎么理解？

摘要：两个对象键名冲突时，取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象，将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解？ mixin是为了让可复用的功能灵活的混入到当前组件中，混合的对象可以包含任意组件选项（生命周期，指令之类等等）, mixin翻译过来叫混合,高级的...

jubincn 2019-08-23 15:28 评论0 收藏0
如何正确的(?)利用 Vue.mixin() 偷懒

摘要：前言最近开发的页面以及功能大都以表格为主，接口获取来的数据大都是需要经过处理，比如时间戳需要转换，或者状态码的转义。首先，还是在文件中定义一个状态码对应对象，这里我们将其对应的内容设为段落。前言最近开发的页面以及功能大都以表格为主，接口获取来的 JSON 数据大都是需要经过处理，比如时间戳需要转换，或者状态码的转义。对于这样的问题，各大主流框架都提供了类似于过滤的方法，在 Vue ...

Leo_chen 2019-08-22 17:29 评论0 收藏0
Vue官网教程疑难解析

摘要：利用可以对组件代码进行抽离及封装。注如果传入的是钩子函数，则按照数组的顺序依次执行钩子函数，且会在组件之前执行跟浅拷贝的顺序有出入页面执行时，依次会打印主要摘录的是Vue教程中的疑难点，结合demo来加深概念的理解（持续更新！）箭头函数在Vue中使用不要在选项属性或回调上使用箭头函数(demo01) var vm1 = new Vue({ data: { ...

wow_worktile 2019-08-23 14:39 评论0 收藏0