12 Mixins

混入(mixins)是一種分發Vue組件中可複用功能非常靈活的方式。
混入對象可以包含任意組件選項
當組件使用混入對象時,所有混入對象的選項將被混入該組件本身的選項

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
            <script src="../lib/vue.js"></script>
    <body>
        <div id="app">
            <button @click="handleClick">觸發</button>
            {{total}}
        </div>
        <script>
            const obj={
                methods:{
                    handleClick(){
                        console.log("click");
                    },
                    handleClick1(){
                        console.log("click1");
                    },
                    handleClick2(){
                        console.log("click2");
                    }
                },
                computed:{
                    total(){
                        return "2222";
                    }
                }
            }
            //mixins 公共方法引入
            new Vue({
                el:"#app",
                data:{
                    
                },
                mixins:[obj],//混入obj 對象到
                methods:{
                    handleClick(){
                        console.log("內部定義");
                    },
                }
            })
            
            
            
        </script>
    </body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章