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

})

巴特西

混合minxins

最新文章

热门文章