大鹏网络网站建设,设计师培训计划,免费公司网站建设,给网站做缓存文章目录mixins介绍mixins特点mixins介绍
Mixins#xff1a;在引入组件之后与组件中的对象和方法进行合并#xff0c;相当于扩展了父组件的对象与方法#xff0c;可以理解为形成了一个新的组件。混入 (mixins)#xff1a;是一种分发 Vue 组件中可复用功能的非常灵活的方式…
文章目录mixins介绍mixins特点mixins介绍
Mixins在引入组件之后与组件中的对象和方法进行合并相当于扩展了父组件的对象与方法可以理解为形成了一个新的组件。混入 (mixins)是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被混入该组件本身的选项。
定义公共的mixins文件 template/templatescriptexport default {name: mixins-test-main,components: {},props: {},data () {return {mixinData: mixin中的变量}},methods: {mixinFunction () {return 我是mixins里面的公共方法},},mounted () {},computed: {}}
/scriptstyle scoped
/style在你页面内调用需要import这个mixins文件 然后通过mixins:[‘文件名’]来使用就可以了
templatedivdiv clickhandleMixin调用mixin方法/div/div
/templatescriptimport MixinItem from ./mixinexport default {name: mixin-test-comp,props: {},mixins: [MixinItem],components: {},data () {return {}},methods: {handleMixin () {console.log(mixin-data, this.mixinData)let mixfun this.mixinFunction()console.log(mixin-fun, mixfun)},},mounted () {},computed: {}}
/scriptstyle scoped
/stylemixins特点
1、方法和参数在各组件中不共享 如混入对象中有一个 cont:1的变量,在组件A中改变cont值为5这时候在组件B中获取这个值拿到的还是1还是混入对象里的初始值数据不共享
2、值为对象的选项 如methods,components等选项会被合并键冲突的组件会覆盖混入对象的比如混入对象里有个方法A组件里也有方法A这时候在组件里调用的话执行的是组件里的A方法
3、值为函数的选项 如created,mounted等就会被合并调用混合对象里的钩子函数在组件里的钩子函数之前调用同一个钩子函数里会先执行混入对象的东西再执行本组件的
4、与vuex的区别 vuex用来做状态管理的里面定义的变量在每个组件中均可以使用和修改在任一组件中修改此变量的值之后其他组件中此变量的值也会随之修改。 Mixins可以定义共用的变量在每个组件中使用引入组件中之后各个变量是相互独立的值的修改在组件中不会相互影响。
5、与公共组件的区别 组件在父组件中引入组件相当于在父组件中给出一片独立的空间供子组件使用然后根据props来传值但本质上两者是相对独立的。
