vue 中 mixins 的使用

本文同步发布在：vue 中 mixins 的使用

mixins（混入）就是定义了一部分公共的方法、计算属性或者钩子函数等 vue 组件中的可复用功能，然后混合进各个组件中使用。下面我们具体来看看怎么使用。

创建一个 demo.js 文件，然后 export 给外部使用

export const demoMixins = {data() {return {name: '我是 mixins 中的字符串 name',user: '我是 mixins 中的字符串 user'}},created() {console.log('我是 mixins 中的钩子函数 created')this.hello()this.say()this.pay()},methods: {hello() {console.log('我是 mixins 中的函数 hello')},say() {console.log('我是 mixins 中的函数 say')}}
}

在组件中引入这个 mixins 对象

<template><div></div>
</template><script>
import { demoMixins } from '@/mixins/demo'
export default {mixins: [demoMixins],data() {return {name: '我是组件中的字符串 name',sex: '我是组件中的字符串 sex'}},created() {console.log('我是组件中的钩子函数 created')this.hello()this.say()this.pay()},methods: {hello() {console.log('我是组件中的函数 hello')},pay() {console.log('我是组件中的函数 pay')}}
}
</script>

我们先来看看执行结果

// => 我是 mixins 中的钩子函数 created
// => 我是组件中的函数 hello
// => 我是 mixins 中的函数 say
// => 我是组件中的函数 pay
// => 我是组件中的钩子函数 created
// => 我是组件中的函数 hello
// => 我是 mixins 中的函数 say
// => 我是组件中的函数 pay

总结

混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 data、methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
混入对象中可以使用和调用组件自身变量和函数，且与在组件自身中使用情况一样。

思考：一个组件是否可以同时引入多个 mixins？如果可以，执行结果和顺序又会是怎样的？大家有兴趣可以自己动手试试看。

本文同步发布在：vue 中 mixins 的使用

vue 中 mixins 的使用相关推荐

vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
Element组件引发的Vue中mixins使用，写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
vue中Mixins 与 Hoc
什么是mixins 在官方文档中混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身 ...
vue中mixins的理解
我的理解是能不用就不用,除非一个js文件在多个vue页面需要使用再用例如: test.js export default {//必须导出data() {return {reqName: '23'}}, ...
Vue中mixins
一.什么是Mixins mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件中 script 项中的任意功能选项, ...
vue中的mixins怎么用？
mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...
如何在Vue 中管理 Mixins（搞懂这两点就足够了）
转载地址:https://segmentfault.com/a/1190000021772893 当我们的Vue项目功能越来越多时,如果有类似的组件,可能会发现自己一次又一次地复制和粘贴相同的数据.方 ...

vue 中 mixins 的使用

vue 中 mixins 的使用相关推荐

最新文章

热门文章