Vue 混合mixins

作者: 哼_ | 来源:发表于2017-10-27 15:39 被阅读94次

mixins
Vue 混合mixins
vue2中的mixins
Vue高级特性「九」-- mixin 混入
Vue－混合、自定义指令、插件和过滤介绍
Vue：Mixins混合选项操作
Vue Mixin用法
Vue音乐播放器学习笔记(5) - mixin混合 + ( v
vue2 — Mixins
Vue 混入（mixins和Vue.mixin）

<style>
        *{
            font-size: 30px;
        }
    .card{
        height:200px;
        background:#ccc;
        width:150px;
        
    }
    </style>
</head>
<body>
    <div id="app">
        <tooltip></tooltip>
        <popup></popup> 
    </div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
var base = {
    methods :{
        show(){
            this.visible = true;
        },
        hide(){
            this.visible = false;
        },
        toggle(){
            this.visible = !this.visible;
        }
    },
    data(){
        return{
            visible:false,
        }
    }
}
Vue.component("tooltip",{
    template : `
        <div>
       <span @mouseenter="show" @mouseleave="hide">buys</span>
        <div v-if="visible"> 
            day day up
        </div>
        </div>
    `,
    mixins :[base]
})
Vue.component("popup",{
    template : `
        <div>
        <button @click="toggle">popup</button>
        <div v-if="visible"> 
        <span @click="hide">×</span>
            <h4>title</h4>
            good good study,day day up;
        </div>
        </div>
    `,
    mixins :[base]
})
//初始化父组件
    var parent = new Vue({
        el:"#app",
        data :{
            card1 : {
                pinned:false
            },
            card2 : {
                pinned:false
            },
            price:10,
        }
    })
</script>

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

混合的时候,碰到同名的情况,以组件的为准.覆盖了全局的混合对象.

这是vue官方API上的建议: