vue的混入(mixin)理解

Love The Way You Lie 2022-09-07 12:23 160阅读 0赞

首先，混入mixin是一个非常灵活的方式，主要用于提高组件内的可复用功能。

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

简单些就是：凡是混入了某个文件的所有vue文件，都可以使用混入文件内的方法等。

而且二者直接不是父子内之间的关系，混入文件内的东西，都可以直接使用，也不需要传参等。

一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。

混入文件：

mixin.js

export const Mixin = {
      data () {
        return {
    	  message: 'hello',
          foo: 'abc'
    	}
      },
      created: function () {
        console.log('混入对象的钩子被调用')
      },
      methods: {
        foo: function () {
          console.log('foo')
        },
        conflicting: function () {
          console.log('from mixin')
        }
      }
    }

在其他文件使用混入：

import { mixin} from '@/mixins/mixin'
    
    
    export default {
        name: "App",
        mixins:[mixin],
        data: function () {
            return {
              message: 'goodbye',
              bar: 'def'
            }
        },
        created: function () {
            console.log(this.$data)
            // => { message: "goodbye", foo: "abc", bar: "def" }
        }
    }

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子**之前**调用。

混入后的数据及方法可以直接使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中的混入 mixin

混入是一种非常灵活的方式，来分发vue组件中可复用的功能，一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有的混入对象的选项将被‘混合’ 进入该组件本身的选项；定

约定不等于承诺〃/ 2022年12月18日 00:49/ 0 赞/ 279 阅读

相关 vue中mixins(混入)的使用

一、来自官网的描述 > 混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的

灰太狼/ 2022年12月08日 05:24/ 0 赞/ 209 阅读

相关 Vue — 详解mixins混入使用

前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们

比眉伴天荒/ 2022年10月10日 01:43/ 0 赞/ 168 阅读

相关 vue的混入(mixin)理解

首先，混入mixin是一个非常灵活的方式，主要用于提高组件内的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本

Love The Way You Lie/ 2022年09月07日 12:23/ 0 赞/ 161 阅读

相关 Vue.js Mixins 混入使用

原文地址:[https://blog.csdn.net/sinat\_17775997/article/details/76570822][https_blog.csdn.ne

落日映苍穹つ/ 2022年04月22日 18:10/ 0 赞/ 195 阅读

相关 Vue之混入(mixins)

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

青旅半醒/ 2022年04月18日 01:48/ 0 赞/ 253 阅读

相关 mixin（vue中的混入）

混入的使用场景：在vue中需要使用全局的方法时可以考虑使用混入的说明：混入就是定义一个对象，这个对象就相当于vue实例，在vue实例中可以创建

心已赠人/ 2022年01月31日 14:25/ 0 赞/ 258 阅读

相关 Vue 中 mixins(混入) 的学习

什么是 mixins(混入)？ mixins（混入）是Vue提供的，通过它可以分发Vue组件中可复用的功能。mixins选项接收一个混入对象的数组，在

落日映苍穹つ/ 2021年12月14日 23:47/ 0 赞/ 309 阅读

相关 vue系列_混入（mixin）

一、混入的理解： 1、混入（mixin）就是一个vue对象，你可以认为，混入是把每个vue组件的公共部分的内容抽取出来了。即提高了代码的复用性。

逃离我推掉我的手/ 2021年11月19日 14:14/ 0 赞/ 346 阅读

相关 Vue混入mixin介绍

目录 Vue混入mixin介绍一、局部组件混入二、全局组件混入三、内容冲突，听谁的 -------------------- Vue混入mixin介绍

水深无声/ 2021年07月25日 02:05/ 0 赞/ 431 阅读