vue中mixin的一点理解

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

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

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

单纯组件引用:

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

mixins:

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

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

具体使用以及内容合并策略请参照官方API及其他技术贴等

https://cn.vuejs.org/v2/guide/mixins.html

http://www.deboy.cn/Vue-mixins-advance-tips.html

时间: 2024-09-30 08:27:20

vue中mixin的一点理解的相关文章

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

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

Vue中mixin的用法

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

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

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

vue中的插槽slot理解

本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; var name = name || 张三; console.log(age,name); } show(); // 20,张三 show(18,"命名") // 18,明明 如果用户不传入参数,那么会输出默认值,如果用户传入,会输出传入的值,这种写法很灵活 vue中的组件,也可以有默认的模

组合数学中排列组合一点理解

在数学中,什么是排列组合呢?其实在生活中我相信使用是非常广泛的,下面做一个简单阐述 集合中不同元素的排列,是对这些元素一种安排.我们也对集合中某些元素的有序安排感兴趣.对一个集合中r个元素的有序安排称为r排列 简单来说,就是存在n个元素,你需要从中选择r个组合起来,这时有一个问题,就是这些元素怎么表示出来? 可以这么理解,如果能够写在纸上,就是说12,21,这样罗列出来的,并且他们是两种不同情况,那么就是排列,即有顺序的,但如果是不能写在纸上(这里只是比喻,并非不能真的写),或者说你每次组合的元

关于vue中的nextTick深入理解

定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新. nextTick的触发时机: 在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调. 应用场景: 需要在视图更新之后,基于新的视图进行操作. 以上出现了事件循环的概念,其涉及到JS的运行机制,包括主线程的执行栈.异步队列.异步API.事件循环的协作,

vue中return的用法理解

在做项目的时候有的时候项目紧急,所以只需要知道如何使用一下方法实现相应的功能,没得停留下来研究理解为什么要这样使用,所以今天趁不忙就写一下自己对return的理解,一方面是加深自己的理解,另一方面也希望能帮助到需要的人! 我先抛出一个简单的问题:return后面可以跟执行语句或者函数么? 答案:可以! 但是有一点,return不论是什么,都是直接返回,即使是语句或者函数也不会执行的!是函数就返回该函数! 下面从一个例子来加深对return用法的理解: export function getTab

Java中try-catch-finally的一点理解

在只有try-catch语句中,如果catch块中出现了return语句或者抛出了异常,那么catch之后的语句是执行不到的:但是如果将代码放入finally中,即使catch中出现了return语句或者抛出了异常,finally中的代码仍然是可以执行到的.看下面的程序: public class Test { public static void main(String[] args) { // TODO Auto-generated method stub System.out.printl

关于java中String的一点理解

??String类是java的最基本类之中的一个,非常好的掌握它的原理非常是必要的! ? 1.String的Final类型的.是不可继承 的.final类默认的方法都为final类型,保证了方法不能被重载.成员变量不影响 ? 2.String的本质就是char[] 而且其值是不可改变的 ? 3.String str = "abc"是一种特殊的创建方式,"abc"存在常量区,str仅仅是对其的引用 ? 4.String能够通过+串联.形成一个新的对象 ? 5.java