混合minxins - 爱码网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="app">
    <popup></popup>
    <tooltip></tooltip>
</div>

<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

#公共的东西写出来，下边直接调用，如果下边写了会被下边的覆盖掉
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">tool</span>
        <div v-if="visible">张建平</div>
</div>
    `,
    minxins: [base],
    data:function () {     //覆盖minxins
        return{
            visible:true
        }
    }
});
Vue.component("popup", {
    template: `
        <div>
        <button @click="toggle">Popup</button>
        <div v-if="visible">
        <span @click="hide">x</span>
        <h4>title</h4>
        this is my test page!
        this is my test page!
        this is my test page!
        this is my test page!
        this is my test page!
        this is my test page!
        this is my test page!
        this is my test page!
</div>
</div>
    `,
    minxins: [base]
});


new Vue({
    el: "#app",
    data: {}
})