Vue中引用公共方法和公共组件

一、Vue中引用公共方法
1.在src新建common文件夹,再新建common.js

export default({
  formatInt:function(num, length) {
    return (Array(length).join('0') + num).slice(-length);
  }
});

2.main.js引入:

//引入公共方法
import common from './common/common';
Vue.prototype.common =common;

3.使用:

this.common.formatInt(tempOrg,3);//格式化数字,例如8-->:008

@click=“common.方法名”

二、公共组件（例如：多个页面都要用到同一下拉框）
1.在src目录下的components文件夹下新建公共组件

Area.vue:

<template>
  <div class="hello">
    <div class="block" style="margin-top: 20px;text-align: left">
      <label class="demonstration" style="font-weight:bold ">地区:</label>
      <el-cascader
        :options="orgTree"
        :props="{ checkStrictly: true }"
        @change="handleChange"
        :value="t_org"
        clearable></el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Area',
  data () {
    return {
      orgs:[],
      tableData: [],
      t_org:'',
      orgTree:[],
    }
  },
  mounted: function () {

    this.orgs=JSON.parse(localStorage.getItem("orgData"));
    // this.my_org=JSON.parse(sessionStorage.getItem("user")).org;
    // this.select_org = this.orgs.length==0?'000/000':this.orgs[0].id;
    this.getListData();
  },
  methods:{
    getListData() {
      let dataArray = [];
      this.orgs.forEach(function (data,i) {
        let parentId;
        let index = data.id.lastIndexOf('/');
        parentId = index >= 0 ? data.id.substr(0, index)  : 0;
        if (parentId == 0 || i==0) {
          let objTemp = {
            value: data.id,
            label: data.name,
            issuer: data.issuer,
            parentId: parentId,
          };
          dataArray.push(objTemp);
        }
      });
      this.dataTree(this.orgs, dataArray)
    },
    dataTree(orgs, dataArray) {
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j];//所有没有父节点的对象
        let childrenArray = [];
        let Id = dataArrayIndex.value;//没有父节点的对象的ID
        for (let i = 0; i < orgs.length; i++) {
          let data = orgs[i];


          let index = data.id.lastIndexOf("/");
          let parentId = index >= 0 ? data.id.substr(0, index)  : 0;//找出该对象的父节点 0表示不存在父节点

          if (parentId == Id) {//判断是否为儿子节点
            let objTemp = {
              value: data.id,
              label: data.name,
              issuer: data.issuer,
              parentId: parentId,
            };
            childrenArray.push(objTemp);
          }
        }
        dataArrayIndex.children = childrenArray;
        if (childrenArray.length > 0) {//有儿子节点则递归
          this.dataTree(orgs, childrenArray)
        }
      }
      this.orgTree = dataArray;
      // return dataArray;
    },
    handleChange(value) {
      this.$emit('selectArea', value[value.length-1]);
      console.log(value[value.length-1]);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2.在main.js中引用，这里需要引用并初始化组件三个步骤

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入axios
import axios from './axios';
Vue.prototype.HOST = '/api';

//引入jquery
import $ from 'jquery';

//引入公共方法
import common from './common/common';
Vue.prototype.common =common;

//屏幕自适应
import 'lib-flexible'

//公共地区
import AreaSelect from '@/components/area/Area';
Vue.use(AreaSelect);// 引用自定义组件
Vue.component('area-select', AreaSelect);// 初始化组件


Vue.config.productionTip = false;
Vue.use(ElementUI);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App, AreaSelect},
  template: '<App/>'
})

3.给调用的页面传值，在Area.vue中：

//Area.vue
handleChange(value) {
      this.$emit('selectArea', value[value.length-1]);
      console.log(value[value.length-1]);
},

4.用 area-select调用：

<area-select v-on:selectArea="areaMethod"></area-select>

 areaMethod: function (v) {
      // childValue就是子组件传过来的值
      alert(v)
 }