07-vue中的mixins混入

最新推荐文章于 2024-09-10 17:59:21 发布

Ultraman_agul

最新推荐文章于 2024-09-10 17:59:21 发布

阅读量71

点赞数

分类专栏：前端笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_42699636/article/details/120053199

版权

前端笔记专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文介绍了Vue.js中的混入（Mixins）特性，混入允许开发者将可复用的功能分发到多个组件中。通过示例展示了如何创建和使用混入对象，包括混入对象中定义的方法和计算属性如何与组件自身的选项合并，并在有同名选项时的处理规则。混入机制提高了代码的复用性和组织性。

摘要由CSDN通过智能技术生成

Mixins

混入（Mixins）是一种分发Vue组件中可利用功能的非常灵活的方式，混入对象可以包含任意组件选项。

当一个组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项,并且vue原本的选项不会被覆盖，如果出现同名属性，vue优先访问内部属性

简单理解：就是将一串外部的代码引入到当前的Vue程序中使用。目的是提高代码的复用性

 <div id="box">
     <button @click="handleClick1">click1</button>
     <button @click="handleClick2">click2</button>
     <button @click="handleClick3">click3</button>
     {{ myData }}
     <br>
     同名函数执行自己vue中的函数：{{ fn() }}
 </div>
 <script>
     var obj = {
         methods:{
             handleClick1(){
                 console.log("click1")
             },
             handleClick2(){
                 console.log("click2")
             },
             fn(){
                 return "外部的"
             }
         },
         computed : {
             myData(){
                 return "helle myData"
             }
         }
     }
     var vm = new Vue({
         el:"#box",
         data:{
             nowIndex:0
         },
         mixins:[obj],//将外部一个对象混入
         methods:{//vue自身的选项一样可以使用，不会被覆盖
            handleClick3(){
                console.log("click3")
            },
            fn(){//同名方法会优先执行Vue内部的程序
                return "自己的"
            }
         }
     })
 </script>