07-vue中的mixins混入

Posted 2021-09-18 Ultraman_agul

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>

运行效果