iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中混入mixin的用法介绍
  • 181
分享到

Vue中混入mixin的用法介绍

VuemixinVue混入 2022-11-13 18:11:59 181人浏览 独家记忆
摘要

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

什么是混入?

混入通过注入配置项到Vue实例用来提升复用性

基础使用

    const myMixin = {
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from mixin');
        },
      },
    };
    var vm = new Vue({
      el: '#app',
      mixins: [myMixin],
    });

选项合并

选项合并发生在下面两种情况

  • mixins接收的是一个数组,mixin中的属性冲突时会发生合并
  • mixin属性和组件原有属性冲突时
    const myMixin = {
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from mixin');
        },
      },
    };
    var vm = new Vue({
      el: '#app',
      mixins: [myMixin],
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from vue instance');
        },
      },
    });

上述两种的选项合并规则是相同的:

  • 周期钩子冲突的时候,会合并成数组都保留,执行顺序是先执行minxi的钩子,再执行组件上的钩子
  • methods、computed这类值为对象的选项在冲突的时候以组件属性为准

自定义合并规则

除了使用上述默认的合并规则,还可以通过Vue.config.optionMergeStrategies自定义合并规则。

	Vue.config.optionMergeStrategies.myMixin=(toVal, fromVal){
	//返回合并的值
	};

通常对于值为对象的属性我们可以借用已有的合并规则

	//借用methods的规则
	Vue.config.optionMergeStrategies.myMixin=Vue.config.optionMergeStrategies.methods;

全局混入

混入也可以全局注册,使用时候要格外小心,它会影响到每一个组件/实例

    Vue.mixin({
      created: function () {
        console.log('mixin created');
      },
    });
    var vm1 = new Vue(...);
    var vm2 = new Vue(...);

总结

  • mixin混入通过注入配置项到vue实例提升复用性
  • 属性冲突时以组件内的属性为准,声明周期的钩子会保留多个

到此这篇关于Vue中混入mixin的用法介绍的文章就介绍到这了,更多相关Vue mixin内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue中混入mixin的用法介绍

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中混入mixin的用法介绍
    目录基础使用选项合并自定义合并规则全局混入总结什么是混入? 混入通过注入配置项到vue实例用来提升复用性 基础使用 const myMixin = { creat...
    99+
    2022-11-13
    Vue mixin Vue 混入
  • 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混入怎么用
    这篇文章主要介绍了Vue中mixin混入怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 局部混入<template>  <...
    99+
    2023-06-25
  • vue cli 局部混入mixin和全局混入mixin的过程
    目录局部混入mixin和全局混入mixin应用场景1、局部混入mixin2、全局混入mixinmixins的使用方法和注意点局部混入mixin和全局混入mixin 应用场景 两个组件...
    99+
    2024-04-02
  • vue中混入mixin的应用实例
    这篇文章主要介绍了vue中混入mixin的应用实例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用...
    99+
    2023-06-15
  • Vue中Mixin混入的示例分析
    这篇文章给大家分享的是有关Vue中Mixin混入的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. 什么是Mixin?想要使用一个事物或者工具,我们首要先了解它是什么,这样我们才好对症下药。其实Mixi...
    99+
    2023-06-29
  • vue混入mixin使用特点
    目录什么是混入创建Mixins使用Mixins在组件(Home.vue)中使用mounted生命周期钩子选项合并可复用性全局混入注意什么是混入 混入 (mixin) : 是一种分发V...
    99+
    2022-12-22
    vue混入mixin vue混入mixin原理
  • 关于vue混入(mixin)的解读
    目录vue混入(mixin)的解读1.钩子函数2.普通方法合并3.局部混入4.全局混入vue中mixin混入注意事项vue混入(mixin)的解读 混入(mixin)提供了一种非常灵...
    99+
    2022-11-13
    vue混入mixin vue混入 vue mixin
  • Vue混入与插件的使用介绍
    目录1. 混入2. 插件1. 混入 概述: 混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选...
    99+
    2024-04-02
  • Vue中mixins混入的介绍与使用详解
    目录一、来自官网的描述二、如何创建Mixins三、项目中如何使用混入四、与vuex的区别五、与公共组件的区别一、来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可...
    99+
    2022-12-23
    Vue mixins混入 Vue mixins使用
  • vue3  mixin 混入使用方法
    目录一、mixin 如何使用 ?二、mixin 使用时注意点2.1、使用 mixin 对象时,组件内部和 mixin 包含相同选项,如何处理呢?2.2、使用的 mixin 对象选项 ...
    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
  • VueMixins混入介绍与使用
    目录混入(Mixins)介绍Mixins使用1,建立js文件2,mixins.js代码3,页面局部混入全局混入混入(Mixins)介绍 混入 (mixin) 提供了一种非常灵活的方式...
    99+
    2023-02-02
    Vue Mixins混入 Vue Mixins
  • python中Mixin混入类如何使用
    这篇文章主要讲解了“python中Mixin混入类如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“python中Mixin混入类如何使用”吧!前言最近在看sanic的源码,发现有很多M...
    99+
    2023-07-02
  • vue3的mixin混入使用方法是什么
    本篇内容主要讲解“vue3的mixin混入使用方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3的mixin混入使用方法是什么”吧!vue 2 中采用选项式API 如: ...
    99+
    2023-06-21
  • vuejs中怎么使用mixin局部混入与全局混入
    这篇文章主要介绍“vuejs中怎么使用mixin局部混入与全局混入”,在日常操作中,相信很多人在vuejs中怎么使用mixin局部混入与全局混入问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vuejs中怎么使...
    99+
    2023-06-30
  • vue中的mixins混入使用方法
    目录mixinsmixins理解使用方法全局混入局部混入mixins的使用方法的复用方法的覆盖合并生命周期mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的...
    99+
    2024-04-02
  • Vue中props用法介绍
    ​前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作