vue中mixin的使用详解

  混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”

进入该组件本身的选项。

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

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

作用:多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数会两个都被调用,mixin中的钩子首先执行。

下面来介绍一下mixin的具体用法:

1.定义一个mixin.js文件

2.在vue文件中使用mixin

vue中mixins(混入)的用法的更多相关文章

  1. vue中mixins的使用方法和注意点(详)

    mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...

  2. vue中mixins的理解及应用

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

  3. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  4. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  5. Vue中Mixins使用

    mixins是一种分发Vue组件中可复用功能的一种灵活方式. mixins是一个JavaScript对象,可以包含组件中的任意选项,比如Vue实例中生命周期的各个钩子函数,也可以是data.compo ...

  6. vue中的混入

    数据对象合并 数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先 var mixin = { data() { return { msg_mixins: 'mixin ...

  7. Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...

  8. Vue中mixins、extends、extend和components的作用和区别

    关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...

  9. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

随机推荐

  1. 手把手教你玩转 Gitea|使用 Docker 安装 Gitea

    使用 Docker 安装 Gitea 的过程非常简单的,堪比"一键式"安装.Gitea 安装使用系列教程将会从多种方式进行全方位的实操演示. 视频演示中使用腾讯云实验环境安装 Do ...

  2. nsis新插件:Aero.dll

    可以使安装界面在 win7 Aero特效下非客户区透明并美化BrandingText定义的字串 下载:http://nsis.sourceforge.net/Aero_plug-in nsis交流群: ...

  3. PHP全栈开发:在本机上创建虚拟主机与域名

    如何在windows+wamp环境上进行自己创建的网站的域名访问 step 1 在wamp的安装目录,如C:\wamp64\www\下创建自己的网站目录pe step 2 右键wamp图标,在wamp ...

  4. day07-2MySQL索引

    MySQL索引 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,查询速度就能提高千百倍. 例子 首先,创建一个有800万条数据的表 -- 创建测试数据库 tmp C ...

  5. Ventoy制作PE启动盘

    前言 不怎么回事,只要是学计算机的都被非计算机专业的认为是会修电脑.常常抛来一个请求:咦,你不是学计算机的吗,帮我重装系统. 在日常生活中准备个有PE系统的U盘,以备不时之需. 常见的PE启动盘的制作 ...

  6. CentOS 7 安全基线检查

    注意:操作时建议做好记录或备份 1.设置密码失效时间 | 身份鉴别 描述: 设置密码失效时间,强制定期修改密码,减少密码被泄漏和猜测风险,使用非密码登陆方式(如密钥对)请忽略此项. 加固建议: 使用非 ...

  7. 2022-08-14-esp32把玩记-③_轻轻松松显示个二维码(esp32+ssd1306显示图片)

    layout: post cid: 9 title: esp32把玩记-③ 轻轻松松显示个二维码(esp32+ssd1306显示图片) slug: 9 date: 2022/08/14 09:22:0 ...

  8. 将Java代码打包成jar文件转换为.exe可执行程序方法

    ​ 做完学生管理系统后我想将代码打包成一个可执行程序,那样就可以直接点击在Windows下运行了,下面就跟大家分享下打包方法. 将Java的代码转换成 .exe 文件需要先把代码打包成 jar 文件然 ...

  9. 云原生分布式 PostgreSQL+Citus 集群在 Sentry 后端的实践

    优化一个分布式系统的吞吐能力,除了应用本身代码外,很大程度上是在优化它所依赖的中间件集群处理能力.如:kafka/redis/rabbitmq/postgresql/分布式存储(CephFS,Juic ...

  10. Python学习三天计划-3

    面向对象 一.类的定义 1.类定义 class是关键字,表示要定义类了 类的属性,即定义在类中的变量(成员变量) 类的行为,即定义在类中的函数(成员方法) 2.对象 创建类对象的语法: class S ...