Vue 混入 (mixins) 学习笔记

最新推荐文章于 2022-12-22 20:19:41 发布

sunshine_hz

最新推荐文章于 2022-12-22 20:19:41 发布

阅读量261

点赞数

分类专栏： vue 学习笔记

本文链接：https://blog.csdn.net/qq_35437531/article/details/83344676

版权

12 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

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

混入的写法

1、全局混入

Vue.mixin({
   data(){
       return{
           num:1
       }
   }
})

2、

var mixin={
    data(){
        return {
            num:2
        }
    }
}
var vm=new Vue({
    mixins:[mixin],
    el:'#app',
    ...
})

1、数据对象会进行浅合并，在和组件的数据发生冲突时以组件数据优先

2、同名的钩子函数将混合为一个数组，因为将同时调用，混入对象的钩子将在组件自身钩子之前调用

3、值为对象的选项，比如 methods, components 和 directives，将被混合为同一个对象，两个对象键名冲突的，取组件对象的键值对。

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

对于大多数对象选项，可以使用 methods 的合并策略：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

关注