vue mixins的使用

官网传送

刚开始接触vue的时候,官网关于mixins的例子看了好几遍,发现还是不会用,包括vuex也是后来慢慢理解一点的,不过和vuex比起来。mixns还是很好理解,简单很多了

就我目前理解mixns,它就相当于一个中间件,可以把一些公用的函数,方法放到这个中间件,页面调用的时候只需要引入mixns就行,提高重复利用率

以存储城市历史记录为例:

1. 在src目录下新建mixns目录,下面新建文件getHistoryCity.js

export default{
    methods:{
        setCitys(data){
           let searchCity = sessionStorage.getItem(‘CITY_INFO‘);
                if(!searchCity){//如果没有历史记录
                     let option=[];
                     option.push(data);
                     sessionStorage.setItem(storename,JSON.stringify(option));
                }else{
                    let newSearchCity=JSON.parse(searchCity);
                    if(newSearchCity.indexOf(data)==-1){ // 如果数组中没有,就加进去,最多存9条
                        newSearchCity.push(data)
                        if(newSearchCity.length>9){
                            newSearchCity.splice(1,newSearchCity.length)
                        }
                    }
                    sessionStorage.setItem(storename,JSON.stringify(newSearchCity));
                }
       },        getCitys(){       return JSON.parse(sessionStorage.getItem(‘CITY_INFO‘));     }   } 
} 

组件或页面里调用 index.vue

<template>
<div class="his_wrap" v-if="historycitys">
          <div class="tit">历史选择城市</div>
          <div class="flex-wrap">
            <div class="his_city" v-for="item in historycitys">{{item}}
          </div>
          </div>
</div>
</template>

<script>
import historyCityMixin from ‘@/mixins/getHistoryCity‘
export default {
  name:‘index‘,
  mixins:[historyCityMixin],
  data(){
    return{
       historycitys:null
    }
  },
  created(){
    this.historycitys = this.getgetCitys();
  },
  methods:{
    selectCity(item){
       this.setCitys(item)
    }
  }
}
</script>        

原文地址:https://www.cnblogs.com/leiting/p/9813128.html

时间: 2024-10-05 07:27:00

vue mixins的使用的相关文章

Vue mixins的初识和使用

项目图片路径需要加入基础路径前缀,开始使用的方法是在配置文档定义一个变量,组件使用的时候导入,但是这次无法 原文:大专栏  Vue mixins的初识和使用 原文地址:https://www.cnblogs.com/petewell/p/11422385.html

vue mixins应用场景

学习知识得在应用场景中去应用,这样才能真正学到东西,记忆也深刻,以后碰到类似的东西就会了. 1.在assets文件夹下创建一个js文件 // 创建一个需要混入的对象 export const mixinTest1 = { created() { this.hello(); }, methods: { hello() { console.log('mixinTest1'); } } }; 2.在组件中使用刚刚创建的混入 import {mixinTest1} from './../assets/j

九、vue mixins 的用法

vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并)到各个组件中使用,方便管理与统一修改.下面举例一些简单的引用用于自己理解和记忆: 先定义一个mixins // 创建一个需要混入的对象 export const mixinHello = { created() { this.hello(); }, methods: { hello() { cons

Vue mixins extend

const mixins = { created () { console.log('mixins created') } } const mixins2 = { created () { console.log('mixins2 created') } } const extend = { created () { console.log('extends created') } } export default { mixins: [mixins, mixins2], extends: ex

vue mixins是什么及应用

mixins是什么? 官网对此的解释比较文绉绉,通俗的理解很简单,就是提供功能抽象 如A,B,C ...Z等很多个页面用到同一个功能,此时的做法就应该把该功能抽象出来,mixins就是干这个的 当然,如果这个功能一个函数就能解决,就没必要这么干了,单独建个文件,专门放一些公用函数就行,mixins能干的比这大多了 上案例: 项目开发中,多个页面要查询数据详情,接口是一样的,但请求参数的不同返回结果也会不同,抽象该功能是最好的方法,以下是代码,具体接口请自行替换 import { fetchMem

Vue Mixin 与微信小程序 Mixins 应用

> #### # 什么是Mixin(混入) Mixin是一种思想,用来实现代码高度可复用性,可以针对属性复制实现代码复用的想法进行一个扩展,就是混入(mixin).混入并不是复制一个完整的对象,而是从多个对象中复制出任意的成员并将这些成员组合成一个新的对象. ``` const obj1 = {a:1,b:2,c:3,d:4,e:5}; const obj2 = {f:6,g:7,h:8,i:9,a:10}; let obj3 = {}; Object.assign(obj3,obj1,obj2

Vue 混合

混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混合对象可以可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混合到该组件本身的选项. //定义一个混合对象 var myMixins = { created:function(){ this.hello(); }, methods:{ hello:function(){ console.log('hello from mixin!'); } } } //定义一个使用混合对象的组件 var Component

13.vue组件

vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="vue.js"></script> <script> Vue.component("aaa",{ template:`&l

浅谈Vue.use

我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这两个文件放置在src/classes/vue-use目录下 接下来对这两个文件进行编写 // 文件: src/classes/vue-use/plugins.js const Plugin1 = { install(a, b, c) { console.log('Plugin1 第一个参数:', a); console.log(