vue项目mixin.js的使用及注意详解
简单的介绍下mixin(混入):
官方介绍:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
注意:
1. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式在Vue.extend() 里最终选择使用相同的选项合并逻辑合并,并在发生冲突时以组件数据优先。
2. 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
3. 在使用mixins时,父组件和子组件同时拥有着子组件内的各种属性方法,但这并不意味着他们同时共享、同时处理这些变量,两者之间除了合并,是不会进行任何通信的
4. 请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。
用法:
1. 在utils文件夹下定义mixin.js,记住他可以拥有vue实例的各种属性和方法:
export default { data () { return { initData: 'mixin初始数据' } }, mounted () { console.log('minxin的挂载输出') }, methods: { doubleNum(num){ return num*2 } } }
2. 在组建中引用mixin
<template> <div> <h1>{{ name }}</h1> <h2>{{ initData }}</h2> <h3>{{ num }}</h3> <h4>{{ mixinNum }}</h4> </div> </template> <script> import mixin from '../utils/minxin'; export default { mixins: [mixin], data () { return { name: '混入组件', num: 10, // initData: '组件初始数据', mixinNum: this.doubleNum(10) } }, mounted () { console.log("Hunru组件的挂载输出"); }, } </script>
结果如下图:
转:https://www.cnblogs.com/qlongbg/p/12176920.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2021-08-29 php递归查找无限分类(树结构)
2018-08-29 UE初写小项目问题之命令行报错:Expected indentation of 4 spaces but found 6
2018-08-29 webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)