Vue——mixins

最新推荐文章于 2024-09-11 10:52:38 发布

TimChen666

最新推荐文章于 2024-09-11 10:52:38 发布

阅读量722

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lihaoen666/article/details/78142788

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

基本使用

首先，在JS里面声明一个变量，里面保存一些公共用的方法、数据。

调用的时候，直接通过mixins调用。

实例

//定义变量
var base = {
    methods: {
        toggle (){
            if(this.visible){
                this.visible = false;
            }else{
                this.visible = true;
            }
        }
    },
    data: function () {
        return {
            visible: false,
        }
    }
};

/提示框
Vue.component('tooltip',{
    template: `
        <div>
            <span @mouseenter = "toggle" @mouseleave = "toggle">提示框标题</span>
            <div v-if="visible">
                我说来自提示框的信息
            </div>
        </div>
    `,
    //通过mixins调用
    mixins: [base]
})

Vue.component('popup',{
    template:`
        <div>
            <button @click = "toggle">显示/隐藏</button>
            <div v-if = "visible">
                <h4>弹窗标题</h4>
                内容。。。
            </div>
        </div> 
    `,
    //通过mixins调用
    mixins: [base],

    //这里又定义了一次visible，会覆盖base里的数据
    data: function () {
        return {
            visible: true,
        }
    }

})