mixins

var  base = { //公用方法
    methods:{
        show:function(){
            this.visible = true
        },
        hide:function () {
            this.visible = false
        },
        toggle:function(){
            this.visible = !this.visible
        }
    },
    data:function () {
        return {
            visible : false
        }
    }
}

Vue.component('tooltip',{
    template:`
        <div>
        <span @mouseenter="show" @mouseleave="hide">byx</span>
        <div v-if="visible">表严肃</div>
</div>
    `,

    mixins:[base]
})
Vue.component('popup',{
    template:`
        <div>
            <button @click="toggle">popup</button>
            <div v-if="visible">
                <h4>title</h4>
                Stephen Hawking is one of the great scientists in the history, whose brilliant idea                           about universe opens the door for people to get to know the universe. Hawking is also
                a humorous person that he has showed in the movies and the public loved him so much.
                As a father, his suggestions to the children are very impressive. 
            </div>
        </div>
    `,
    mixins:[base],
    data:function () {
        return {
            visible :true
        }
    },
})


var app = new Vue({
    el:"#app",
    data:{

    },

})