VUE mixins使用

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

使用方法：

1、创建混入对象：在src文件夹创建mixins文件夹，再在mixins文件夹下创建一个index.js文件

// 创建一个需要混入的对象
export default{data(){return {dataMix: '混入对象的data'}},methods:{mixinsFun(){console.log('调用混入对象的methods的函数')}}
}

2、在组件内引入并引用混入

<template><div><div>{{data}}</div><div @click="mixinsFun">{{dataMix}}</div><input type="text" v-model="testMix"></div>
</template>
import mixins from '@/components/mixins/index'export default {mixins: [mixins],data () {return {data:"这是组件中的数据"}},methods:{fun () {console.log("this.data");}}
}

3、解释

组件中会将混入的数据当成自己组件中的数据使用，会将混入中的方法当成自己组件中的方法调用。

当组件中和混入中含有相同的数据名或是方法名字时，会使用组件中的变量名和方法名。

在组件中和混入中有相同的created()函数时，先执行混入中的created，再执行组件中的created。猜想其它生命周期也应该一样。

再组件中和混入中有相同的watch()函数时，先执行混入中的watch函数再执行组件中的watch函数

VUE mixins使用相关推荐

Vue mixins（混入）附代码示例详解
mixins 我们称它为 "混入" : 官方的解释: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使 ...
vue mixins
1.mixins: 这个属性是个数组,也就是说可以加载多个 minxin 文件. mixins中的方法是完成业务逻辑.所以在组件的生命周期中都会添加 this.handlePlaylist() 方法. ...
Vue mixins学习
转载地址:https://shq5785.blog.csdn.net/article/details/111285248 前言在开发前端项目的时候,经常会遇到这样一种开发场景:多个模板页中应用的组件 ...
Vue mixins 和 extends 使用详解
Vue 提供了mixins 和 extends 来在组件里直接合并一些特定的属性. 用法如下: var mixin = {created: function () { console.log(1) } ...
vue mixins（vue3 hooks）动态获取div高度
之前转载过一篇文章: https://blog.csdn.net/qq_37167049/article/details/103084927 可以动态计算div 高度,但是比较繁琐的痛点是: 需要在每 ...
vue mixins 混入
1.mixins 含义 mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改,mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式. ...
Vue3 Composition API如何替换Vue Mixins
想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Compo ...
vue mixins的用法
相信大家都用过less.sass等预编译器.它们中也有mixins,用法也很简单,例如Less中: .box{border:1px solid red;padding:10px; } .mixin{. ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

VUE mixins使用

VUE mixins使用相关推荐

最新文章

热门文章