关于vue混入(mixin)的解读

vue混入mixin vue混入 vue mixin 2022-11-13 18:11:12 533人浏览独家记忆

摘要

目录Vue混入(mixin)的解读1.钩子函数2.普通方法合并3.局部混入4.全局混入vue中mixin混入注意事项vue混入(mixin)的解读混入(mixin)提供了一种非常灵

vue混入(mixin)的解读

混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用。

 //  minxin.js
const mixin = {
  data() {
    return{
      msg1: '我是混入内容1',
      msg2: '我是混入内容2'
    }
  },
  created() {
    console.log(this.msg3)
  }
}
export default mixin;
</script>
...
// 页面组件
<template>
  <div class="header">
    <h1></h1>
  </div>
</template>
<script>
import mixin from './mixins/mixin'
export default {
  mixins: [mixin],
  name: 'Header',
  data(){
    return{
      msg1: '我是组件内容1',
      msg3: '我是组件内容2'
    }
  },
  created() {
      console.log(this.msg2)
      console.log(this.msg1)
  },
}
</script>
  
    // 我是组件内容2
    // 我是混入内容2
    // 我是组件内容1

2.普通方法合并

当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        methods: {
            mixin: function() {
                console.log('MixinOne')
            },
            mixinTwo: function () {
                console.log('MixinTwo')
            }
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        methods: {
            mixin: function () {
                console.log('component')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
    })
    
    // component
    // MixinTwo
</script>

3.局部混入

在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {
  data() {
    return {
      msg: "hello"
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + ',这是mixin混入方法')
    }
  }
}
export default mixin;

在需要的页面中引入：

<template>
    <div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
        }
    }
    mounted() {
        this.mixinMethod()
    }
}
// hello，这是mixin混入的方法

4.全局混入

在main.js加入以下代码

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

在组件中直接引用：

<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
    mounted() {
        this.mixinMethod()
    }
}
// hello，这是mixin混入的方法
</script>

vue中mixin混入注意事项

1.页面和mixin的created都会执行，先执行mixin的，再执行当前页面的;

2.当前页面可以访问mixin的data和methods;

3.mixin里的方法可以调用页面的data和methods;

4.可以在当前页面改变mixin里的data

注意：当本组件与mixin有同名方法或同名数据时，优先调用本组件的方法或数据，混入的部分失效

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 关于vue混入(mixin)的解读

本文链接: https://www.lsjlt.com/news/169556.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

关于vue混入(mixin)的解读

目录vue混入(mixin)的解读1.钩子函数2.普通方法合并3.局部混入4.全局混入vue中mixin混入注意事项vue混入(mixin)的解读混入(mixin)提供了一种非常灵...

99+

2022-11-13

vue混入mixin vue混入 vue mixin
Vue之mixin混入详解

目录局部混入全局混入总结局部混入 <template> <div> <h2 @click="showName">学生姓名：{{...

99+

2024-04-02
vue cli 局部混入mixin和全局混入mixin的过程

目录局部混入mixin和全局混入mixin应用场景1、局部混入mixin2、全局混入mixinmixins的使用方法和注意点局部混入mixin和全局混入mixin 应用场景两个组件...

99+

2024-04-02
vue混入mixin的介绍及理解

目录一、mixin是什么二、使用场景三、原理分析四、mixin的理解一、mixin是什么 mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而...

99+

2022-11-13

vue mixin vue mixin原理
讨论vue中混入mixin的应用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本...

99+

2024-04-02
vue混入mixin使用特点

目录什么是混入创建Mixins使用Mixins在组件（Home.vue）中使用mounted生命周期钩子选项合并可复用性全局混入注意什么是混入混入 (mixin) ：是一种分发V...

99+

2022-12-22

vue混入mixin vue混入mixin原理
Vue中mixin混入怎么用

这篇文章主要介绍了Vue中mixin混入怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。局部混入<template> <...

99+

2023-06-25
Vue中Mixin混入的示例分析

这篇文章给大家分享的是有关Vue中Mixin混入的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1. 什么是Mixin？想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。其实Mixi...

99+

2023-06-29
Vue中混入mixin的用法介绍

目录基础使用选项合并自定义合并规则全局混入总结什么是混入？混入通过注入配置项到vue实例用来提升复用性基础使用 const myMixin = { creat...

99+

2022-11-13

Vue mixin Vue 混入
vue中混入mixin的应用实例

这篇文章主要介绍了vue中混入mixin的应用实例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用...

99+

2023-06-15
vue混入mixin流程与优缺点详解

目录1、什么是mixin2、mixin与Vuex的区别3、mixin的使用3.1、局部混入3.2、全局混入4、mixin选项合并4.1、生命周期函数4.2、data中的数据冲突4.3...

99+

2024-04-02
vuejs中使用mixin局部混入/全局混入的方法详解

目录前言需求什么是mixin全局混入几个重要的疑问选项合并生命周期函数data数据冲突方法名冲突mixin的优缺点1.变量名来源不明确2. 多个mixins的生命周期会合并融合到一起...

99+

2024-04-02
python 中Mixin混入类的使用方法详解

目录前言Mixin 与继承的区别总结前言最近在看sanic的源码，发现有很多Mixin的类，大概长成这个样子 class BaseSanic( RouteMixin, ...

99+

2024-04-02
vue3的mixin混入使用方法是什么

本篇内容主要讲解“vue3的mixin混入使用方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3的mixin混入使用方法是什么”吧!vue 2 中采用选项式API 如： ...

99+

2023-06-21
详解vue之mixin的使用

目录vue之mixin的使用mixin之中的data数据访问mixin / index.jsHome.vueAbout2.vuemixin中的 methods方法和computed使...

99+

2024-04-02
Vue 详解mixins混入用法大全

目录前言一、什么是Mixins？二、什么时候使用Mixins？三、如何创建Mixins？四、如何使用Mixins？五、Mixins的特点六、Mixins合并冲突七、与v...

99+

2024-04-02
关于@EnableGlobalMethodSecurity注解的用法解读

目录作用prePostEnabled Securedjsr250E总结作用当我们想要开启spring方法级安全时，只需要在任何 @Configuration实例上使用 @...

99+

2023-03-19

@EnableGlobalMethodSecurity注解 @EnableGlobalMethodSecurity @EnableGlobalMethodSecurity注解用法
Vue中mixins混入的介绍与使用详解

目录一、来自官网的描述二、如何创建Mixins三、项目中如何使用混入四、与vuex的区别五、与公共组件的区别一、来自官网的描述混入 (mixins)：是一种分发 Vue 组件中可...

99+

2022-12-23

Vue mixins混入 Vue mixins使用
关于Vue代码可读性的几点建议

目录一、善用组件让代码更有条理性1、提取UI组件2、按模块提取业务组件3、按功能提取功能组件二、利用v-bind使组件的属性更具有可读性三、利用attrs与attrs与listen...

99+

2024-04-02
解读Vue-loader的相关知识

目录什么是Vue-loader一、处理资源路径转换规则为什么要转换资源URL（好处）二、使用预处理器三、Scoped CSS3.1 混用组件和全局样式3.2 子组件根元素...

99+

2023-03-24

Vue-loader相关知识 Vue-loader 解读Vue-loader