深入了解vue中mixins的用法和注意事项

本篇文章带大家了解一下vuemixins(混入)特性,介绍一下mixins的使用方法和注意点,希望对大家有所帮助!

深入了解vue中mixins的用法和注意事项

mixins基础概况

vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~

混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

立即学习“前端免费学习笔记(深入)”;

怎么用?

举个栗子:

定义一个混入对象

1.png

把混入对象混入到当前的组件中

2.png

用法似不似相当简单呀

mixins的特点

1 方法和参数在各组件中不共享

混合对象中的参数num

3.png

组件1中的参数num进行+1的操作

4.png

组件2中的参数num未进行操作

5.png

看两组件中分别输出的num值

6.png

7.png

大家可以看到,我在组件1里改变了num里面的值,组件2中的num值还是混入对象里的初始值

2 值为对象的选项,如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象的

混入对象中的方法

8.png

组件中的方法

9.png

打印台的输出

10.png

3 值为函数的选项,如created,mounted等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用

混入对象函数中的console

11.png

组件函数中的console

12.png

打印台的打印

13.png

与vuex的区别

经过上面的例子之后,他们之间的区别应该很明显了哈~

vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

与公共组件的区别

同样明显的区别来再列一遍哈~

组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。

Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

相关推荐:《vue.js教程》

以上就是深入了解vue中mixins的用法和注意事项的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3019976.html

(0)
上一篇 2025年3月13日 05:32:44
下一篇 2025年2月25日 20:22:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue的八大生命周期状态分别是什么

    vue的八大生命周期状态:1、beforeCreate;2、created;3、beforeMount;4、mounted;5、beforeUpdate;6、updated;7、beforeDestroy;8、destroyed。 本教程操…

    2025年3月13日
    200
  • vuejs是什么时候出来的

    vuejs是2013年受到Angular的启发,开发出来的一款轻量框架,最初命名为Seed;2013年12月更名为vue,图标颜色是代表勃勃生机的绿色,版本号是“0.6.0”。2014年1月24日,vue正式对外发布,版本号是“0.8.0”…

    2025年3月13日
    200
  • vue怎么读取文件内容

    vue读取文件内容的方法:1、创建一个test.properties测试内容;2、通过“readTestFile(){const file = this.loadFile(‘test.properties’)&#82…

    2025年3月13日
    200
  • 怎么离线安装vue环境

    离线安装vue环境的方法:1、cmd运行命令“npm config get cache”;2、内网电脑安装nodejs;3、内网全局安装目录;4、内网命令安装离线依赖包;5、把vue项目复制到内网;6、查看全局命令是否正常即可。 本文操作环…

    2025年3月13日 编程技术
    200
  • vue脚手架安装步骤

    vue脚手架安装步骤:1、安装node环境;2、通过“npm install -g vue-cli”安装vue-cli脚手架;3、根据提示选择安装插件;4、安装项目依赖;5、运行“npm run dev”即可。 本文操作环境:windows…

    2025年3月13日 编程技术
    200
  • vue传值方式有哪些

    vue传值方式有:1、prop向下传递,事件向上传递;2、子组件通过$emit触发父组件的自定义事件;3、通过定义公共实例文件来进行非父子组件之间的传值。 本文操作环境:windows7系统、vue2.5.17版,DELL G3电脑。 vu…

    2025年3月13日
    200
  • vue有哪三种传值方式

    vue三种传值方式:1、“父传子”;父组件通过prop给子组件下发数据(传值)。2、“子传父”;子组件通过“事件”给父组件发送消息。3、“非父子传值”;非父子组件之间需要定义个公共的公共实例文件“bus.js”,作为中间仓库来传值。 本教程…

    2025年3月13日
    200
  • vue的router和route区别是什么

    区别:router是通过“Vue.use(VueRouter)”和VueRouter构造函数得到一个实例对象,它是一个全局的对象。而route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象。 本教程操作环境:wi…

    2025年3月13日
    200
  • vue中如何监听vuex中的数据变化

    vue监听vuex中数据变化的方法:可以先通过计算属性computed来获取vuex中的数据;然后通过watch来监听计算属性中值的变化,获取数据变更前后的值,并作出相应的处理。 本教程操作环境:windows7系统、vue2.9.6版,D…

    2025年3月13日
    200
  • vuejs传递数据的方法有哪些

    传递方法:1、父组件利用props向子组件传递数据;2、子组件通过事件传递数据给父组件;3、利用路由传数据;4、利用localStorage或sessionStorage存储数据,然后使用getItem获取数据;5、利用Vuex来传递数据。…

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论