Vue学习笔记——11.混入属性

最新推荐文章于 2021-10-26 16:26:17 发布

原来是肖某人

最新推荐文章于 2021-10-26 16:26:17 发布

阅读量296

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_33905217/article/details/107695386

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.基本使用

通过混入我们可以减少代码冗余，重用某些需要复用的组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <n1></n1>
    <n2></n2>
</div>
<script>
    var myMixn = {
        methods:{
            sayHello:function () {
                alert(this.msg)
            }
        },
        template:`
        <div>
            <input type="button" @click="sayHello" value="btn">
        </div>
            `
    }

    Vue.component('n1',{
        mixins:[myMixn],
        data(){
            return{
                msg:'n1的hello'
            }
        }
    })

    Vue.component('n2',{
        mixins:[myMixn],
        data(){
            return{
                msg:'n2的hello'
            }
        },
    })


    var vue = new Vue({
        el:'#app',
        data:{
            msg:'Hello World'
        },
        provide:function () {
            return{
                msg:this.msg
            }
        }
    });
</script>
</body>
</html>

2.选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

3.全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

4.自定义选项合并策略

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

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

对于多数值为对象的选项，可以使用与 methods 相同的合并策略：

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

原来是肖某人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记——11.混入属性

1.基本使用通过混入我们可以减少代码冗余，重用某些需要复用的组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://lib.baomitu.com/vue/2.6.11
复制链接

扫一扫