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