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

posted @   与f  阅读(663)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.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报错)
点击右上角即可分享
微信分享提示