谈谈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 多个变量同时赋相同值互相影响,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中如何给el-table-column添加指定列的点击事件

    vue中如何给el-table-column添加指定列的点击事件

    elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • VUE多个下拉框实现双向联动效果

    VUE多个下拉框实现双向联动效果

    这篇文章主要为大家详细介绍了VUE多个下拉框实现双向联动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue项目Luckysheet的使用

    vue项目Luckysheet的使用

    这篇文章主要介绍了vue项目Luckysheet的使用,目前Luckysheet不支持使用npm安装包,所以只能使用CDN引入依赖,在vue项目的public/index.html文件里引入即可,本文通过示例代码给大家详细介绍,需要的朋友可以参考下
    2022-08-08
  • vue-cli设置publicPath小记

    vue-cli设置publicPath小记

    这篇文章主要介绍了vue-cli设置publicPath小记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • preload对比prefetch的功能区别详解

    preload对比prefetch的功能区别详解

    这篇文章主要为大家介绍了preload对比prefetch的使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 解决在Vue中使用axios POST请求变成OPTIONS的问题

    解决在Vue中使用axios POST请求变成OPTIONS的问题

    这篇文章主要介绍了解决在Vue中使用axios POST请求变成OPTIONS的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue使用blob下载文件遇到的问题小结

    vue使用blob下载文件遇到的问题小结

    Blob 对象表示一个不可变、原始数据的类文件对象,这篇文章主要介绍了vue使用blob下载文件遇到的问题记录,需要的朋友可以参考下
    2024-02-02
  • vue中的install方法使用

    vue中的install方法使用

    这篇文章主要介绍了vue中的install方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue+Django项目部署详解

    Vue+Django项目部署详解

    这篇文章主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论