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的钩子函数会比组件的钩子函数先被调用。

原文地址:https://www.cnblogs.com/ccnNL/p/9274519.html

时间: 2024-10-08 01:08:17

vue中mixin 感觉很牛逼(父子组件融合成一个新组件)的相关文章

我是个很牛逼地活在别人眼里的傻逼

| 忏悔录 | 现在的我 沉心静气,尝试专一 曾经的我 自卑自负,大落大起 生活教会我沉稳与内敛 而背后的老师 是不堪回首的自己 我不会避讳什么,或使用小A.B兄一类的笔名自欺欺人,这就是我的故事,也许,也是众多和我一样自卑与自负一体,但已开始悔悟的朋友们的故事--这篇文章,除了自省,还想给有像我一样经历得同仁说一句:乖,醒一醒.--Emerson 1401354763 偶然看到一篇名为<我曾是个很牛逼地活在别人眼里的傻逼>的微信.冲着标题进去,想看看这位到底是怎么牛逼又怎么傻逼.看完,懵逼-

----Vue 中mixin 的用法详解----

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

为什么美国学生学的数学比我们简单却还能做出很牛逼的东西?

听说过这样一种说法:美国初中生学的数学是咱们国家小学生学的水平,美国高中生学的数学是咱们国家初中的水平.(不知道对不对) 那么,为什么很多需要数学的东西(比如计算机图形学领域)都是人家做出来的而不是咱们 ?算法对数学的要求够大了吧? PPS:一个类似的回答,有启发意义:美国高中教育那么粗浅,大学教育那么尖端,中间的 Gap 怎么搞定? 私以为 @倪大为 同学引用的答案说的是最正确的.特此赞同一下:"美国给予不热爱数学的学生最基础的数学教育,而给予热爱数学的天才最高水平的数学教育." 长久以来,中

Vue中mixin的用法

在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的index.js文件, 这样,我们准备工作就做好了,那么在.vue文件中,我们就可以调用啦: 大功告成,其实很好理解的! 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9304103.html

没有很牛逼的团队该如何做好APP应用推广

对于一个程序设计公司或者说独立开发者而言,自己的作品受欢迎是最希望看见的事情!一个成功的作品不仅需要前期的设计,更需要的是后期的运营推广,让更多的用户能够看见自己的作品!这儿我给大家分享一些APP海外推广的经验![无敌勇士科技] 1.ASO-应用商店优化: 这一部分,开发者可以将app icon和截图展示设计做得好点,有亮点,这样才能吸引用户来更多的了解你的app.而且好的截图还可以增加下载几率.如果说开发者自己做不好,也可以找一些优化此类的平台! 2.市场渠道: 和国内市场相比,海外市场没有那

vue中mixin的一点理解

vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了. 单纯组

C#对象序列化失败解决方法(很牛逼)

C#序列化非常方便.只需定义类型即可.但是有时也会遇到奇葩问题.你是否遇到下面这样的问题 这种问题困扰了我很久.最后终于解决了.方法真的想不到! 废话少说.看看如何解决? 上代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Runtime.Serialization; namespace WeChat.BLL.ClassModel.Emplo

u就很牛逼v非常

你 http://ypk.39.net/search/all?k=%A8%7B%D2%CB%B6%BC%C4%C4%C0%EF%D3%D0%C3%D4%BB%E8%D2%A9%C2%F4Q%A3%BA%A3%B1%A3%B1%A3%B2%A3%B7%A3%B4%A3%B0%A3%B1%A3%B1%A3%B7%A3%B5%A8%7B http://ypk.39.net/search/all?k=%A8%8D%B5%B1%D1%F4%C4%C4%C0%EF%D3%D0%C3%D4%BB%E8%D2%

LOD,听起来很牛逼的样子

<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - level-of-details</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no,