vue的mixins的使用

mixins就是混入。

一个混入对象可以包含任意组件选项。

同一个生命周期，混入对象会比组件的先执行。

1.创建一个test.js，用export暴露出mixins对象

export const mixinsTest = {methods:{hello(){console.log("hello");}},created(){this.hello()}
}

2.在组件中引入这个mixins对象，通过mixins:[xxx]，使用mixins对象

<template>
<div>home
</div>
</template>
<script>
import {mixinsTest} from '../util/test.js'
export default {name: "Home",data () {return {};},created(){console.log("home");},//mixins的created会先被调用,然后再执行组件的created
  mixins:[mixinsTest]
}
</script>

补充：

可以混入多个mixins对象

//暴露两个mixins对象
export const mixinsTest = {methods: {hello() {console.log("hello mixins");}},created() {this.hello();},
}export const mixinsTest2 = {methods:{hello2(){console.log("hello2");}},created() {this.hello2();},
}

组件中引入两个mixins对象

<template>
<div>home
</div>
</template>
<script>
import {mixinsTest,mixinsTest2} from '../util/test.js'
export default {name: "Home",data () {return {};},created(){console.log("1212");},mixins:[mixinsTest2,mixinsTest] // 先调用那个mixins对象，就先执行哪个

}
</script>
<style lang="css" scoped>
</style>

打印的顺序是：

转载于:https://www.cnblogs.com/luguankun/p/10849636.html

vue的mixins的使用相关推荐

vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
vue 中 mixins 的使用
本文同步发布在:vue 中 mixins 的使用 mixins(混入)就是定义了一部分公共的方法.计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用.下面我们具体来看看怎么使 ...
【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
vue中Mixins 与 Hoc
什么是mixins 在官方文档中混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身 ...
mixins php,vue的mixins属性详解
这篇文章主要介绍了vue的mixins属性详解,现在分享给大家,也给大家做个参考. 首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要 ...
vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
vue的mixins
一.基础提供组件选项的可复用性,比如:data.components.props.created.methods等等.当一个组件引用mixins的时候,所有mixins对象的选项将被"混合 ...
Vue混入mixins
Vue官网上介绍: 混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 虽然平 ...
使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts 1 import { Vue, Component, Watch } from "vue-property-decorator" 2 Component.reg ...
vue中mixins的理解
我的理解是能不用就不用,除非一个js文件在多个vue页面需要使用再用例如: test.js export default {//必须导出data() {return {reqName: '23'}}, ...

vue的mixins的使用

vue的mixins的使用相关推荐

最新文章

热门文章