mixins混合使用

2020-11-18  本文已影响0人  陶菇凉

1.mixin与mixins的区别

mixin是全局注册的。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑,所以一般情况下不建议使用。
mixins选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

1.首先在src文件夹下面建一个mixins的文件夹,在里面创建一个js空白文件,代码如下;
export const getCardsInfo = {
    data(){
        return{
        }
    },
    created(){
      this.getCardsInfocom();
    },
    methods:{
        getCardsInfocom(){
            getCards()
            .then((res) => {
                if (res.data.code == 0) {
                    this.AllCards = res.data.data;
                }
            }).catch((err)=>{
                this.$message.error("数据获取失败");
            })
        },
    }
}

你可以在这里面将你想要封装的函数写在里面

2.在页面进行调用
image.png
上一篇 下一篇

猜你喜欢

热点阅读