VUE混合mixins

把公共的部分抽取出来放到一个类中

调用： mixins: [类名]

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混合mixins</title>

</head>

<body>
    <div id="app">
        <popup></popup>
        <tooltip></tooltip>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

//相似于公共的类
var base = {
    data: function () {
        return {
            visible: false,
        }
    },
    methods: {
        show: function () {
            this.visible = true
        },
        hide: function () {
            this.visible = false
        },
        toogle: function () {
            this.visible = !this.visible
        }
    }
}

// 提示框---自定义组件
Vue.component('tooltip', {
    template: '<div><span @mouseenter="show" @mouseleave="hide">bys</span><div v-if="visible">白岩松</div></div>',
    // 直接调用混合mixins
    mixins: [base]
})

// 弹出层 弹出框---自定义组件
Vue.component('popup', {
    template: '<div><button @click="toogle">Popup</button><div v-if="visible"><span @click=hide>X</span><h4>标题</h4>内容内容内容内容内容内容内容内容内容内容内容内容</div></div>',
    // 直接调用混合mixins
    mixins: [base],
    // 明确在下面设置的属性会覆盖mixins的属性
    data: function () {
        return {
            visible: true,
        }
    },
    // methods: {
    //     
    // }

})

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

    }
})

吃瓜的阳大王

发布了19 篇原创文章 · 获赞 1 · 访问量 165

私信关注

VUE混合mixins

VUE混合mixins

把公共的部分抽取出来放到一个类中

调用： mixins: [类名]

HTML

JS

猜你喜欢