谈谈vue中mixin的一点理解

 更新时间:2017年12月12日 11:34:34   投稿:mrr  
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。下面给大家谈谈我对vue中mixin的一点理解,需要的朋友参考下吧

 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别?

     组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

     而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

     单纯组件引用:

          父组件 + 子组件 >>> 父组件 + 子组件

     mixins:

          父组件 + 子组件 >>> new父组件 

     值得注意的是,在使用mixins时,父组件和子组件同时拥有着子组件内的各种属性方法,但这并不意味着他们同时共享、同时处理这些变量,两者之间除了合并,是不会进行任何通信的。最开始看到mixins的时候,天真的我似乎看到了一种向下的类似vuex的数据共享方案,心情十分激动啊。

 下面给大家介绍下Vue中的mixin

     一,mixin是什么

mixin文件是一个对象,可以包含vue组件的任意成分。是分发Vue组件可复用功能的非常灵活的方式,当mixin被组件使用时,所有minxin里的属性/方法会与组件里的属性/方法混合。

二,mixin使用

在Vue组件中可以有mixins属性,该属性值类型为数组。将mixin引入,作为mixins数组的元素mixins: [mixin]

组件A应用了mixin,两者的属性如methods,components和directives,将被混合为同一个对象,如果methods,components和directives中有同名的属性,则mixin中的将会被忽略。同名钩子函数会组成数组并都会被调用,并且mixin的钩子函数会比组件的钩子函数先被调用。

总结

以上所述是小编给大家介绍的vue中mixin,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue组件引用另一个组件出现组件不显示的问题及解决

    vue组件引用另一个组件出现组件不显示的问题及解决

    这篇文章主要介绍了vue组件引用另一个组件出现组件不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue+element实现动态加载表单

    vue+element实现动态加载表单

    这篇文章主要为大家详细介绍了vue+element实现动态加载表单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue中的生命周期介绍

    Vue中的生命周期介绍

    这篇文章介绍了Vue中的生命周期,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue3+vite+vant4手机端项目实战记录

    vue3+vite+vant4手机端项目实战记录

    这篇文章主要给大家介绍了关于vue3+vite+vant4手机端项目实战的相关资料,Vue3是一种前端开发框架,它的目标是提供更好的性能和开发体验,需要的朋友可以参考下
    2023-08-08
  • Vue3源码分析组件挂载初始化props与slots

    Vue3源码分析组件挂载初始化props与slots

    这篇文章主要为大家介绍了Vue3源码分析组件挂载初始化props与slots实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • element-ui树形控件后台返回的数据+生成组织树的工具类

    element-ui树形控件后台返回的数据+生成组织树的工具类

    这篇文章主要介绍了element-ui树形控件后台返回的数据+生成组织树的工具类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 一篇超详细的Vue-Router手把手教程

    一篇超详细的Vue-Router手把手教程

    这篇文章主要给大家介绍了关于Vue-Router的相关资料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • vue3.x项目降级到vue2.7的解决方案

    vue3.x项目降级到vue2.7的解决方案

    Vue2.7是Vue2.x的最终次要版本,下面这篇文章主要给大家介绍了关于vue3.x项目降级到vue2.7的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue element 中的table动态渲染实现(动态表头)

    vue element 中的table动态渲染实现(动态表头)

    这篇文章主要介绍了vue element 中的table动态渲染实现(动态表头),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue.js 中的异步组件是什么及使用异步组件的示例

    Vue.js 中的异步组件是什么及使用异步组件的示例

    异步组件是 Vue.js 中提高应用程序性能和加载速度的重要功能之一,在使用异步组件时,需要注意组件的加载时间、错误处理和命名规范等问题,本文将介绍 Vue.js 中异步组件的概念、优势以及如何使用异步组件,感兴趣的朋友一起看看吧
    2023-10-10

最新评论