07-vue中的mixins混入

Posted 2023-02-20 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>

运行效果