混合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: {}
})

 

posted @ 2018-01-30 20:19  一石数字欠我15w!!!  阅读(1857)  评论(2)  编辑  收藏  举报