Vue公共页面和使用页面交互记录

定义公共模块：

<template>
  <div id="home-container" class="main">
    <el-row>
        <el-select v-model="shareSourceType" placeholder="请选择" v-if="showShareSelectFlag" @change="shareSourceTypeChange" :disabled="disable">
            <el-option
            v-for="item in shareSourceTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
    </el-row>
  </div>
</template>
                        
<script>
  export default {
    name:'statistic',
    methods:{
      sourceTypeChange(val){
        if(val === 1){
            this.disable = false;
        }else if(val === 2){
            this.disable = true;
        }else {
            console.log("error");
        }
      },
      shareSourceTypeChange(val){
        console.log(val);
      }
    },
    data(){
        return {
            sourceTypeList:[],
            sourceType:1,
            pvSourceTypeList:[],
            pvSourceType:1,
            uvSourceTypeList:[],
            uvSourceType:1,
            shareSourceTypeList:[],
            shareSourceType:1,
            disable:false,
        }
    },
    props:{
        showShareSelectFlag:{
            type: Boolean,
            default: true
        }
    }
  }
</script>

定义公共方法:

/**
 * 根据type设置pv、uv、shareTime
 * @param {pv类型} pvType 1 总量 2 app端量 3.小程序端量 -1 不处理
 * @param {uv类型} uvType  1 总量 2 app端量 3.小程序端量 -1 不处理
 * @param {分享类型} shareType  1 总量 2 app端量 3.小程序端量 -1 不处理
 * @param {*} data 
 */
function setExportStatisticData(pvType,uvType,shareType,data){
    for (let index = 0; index < data.length; index++) {
        if(pvType === 1){
            //总量
            data[index]['pv'] = data[index]['pv'] + data[index]['mpv'];
        }else if(pvType === 2){
            data[index]['pv'] = data[index]['pv'];
        }else if(pvType === 3){
            data[index]['pv'] = data[index]['mpv'];
        }

        if(uvType === 1){
            //总量
            data[index]['uv'] = data[index]['uv'] + data[index]['muv'];
        }else if(uvType === 2){
            data[index]['uv'] = data[index]['uv'];
        }else if(uvType === 3){
            data[index]['uv'] = data[index]['muv'];
        }

        if(shareType === 1){
            //总量
            data[index]['shareTimes'] = data[index]['shareTimes'] + data[index]['miniShareTimes'];
        }else if(shareType === 2){
            data[index]['shareTimes'] = data[index]['shareTimes'];
        }else if(shareType === 3){
            data[index]['shareTimes'] = data[index]['miniShareTimes'];
        }
    }
}

export {
    setExportStatisticData
}

其他组件引用公共页面和公共方法:

<statistic :showShareSelectFlag="false" ref='statistic'/>
<script>
import {
		setPvData,
		setUvData,
		setShareTimeData,
		setExportStatisticData
} from '@/utils/statics'
import Statistic from '@/components/Statistic/index.vue'

	export default {
		components : {Statistic},
		methods: {
			getList() {
				let pvType = this.$refs.statistic.$data.pvSourceType;
							let uvType = this.$refs.statistic.$data.uvSourceType;
							let shareType = this.$refs.statistic.$data.shareSourceType;
							setExportStatisticData(pvType,uvType,shareType,res.data.list);
			}
		}
	}
</script>

注意:

1. 组件A向公共组件传参，通过props。
2. 组件A拿到公共组件里面的数据通过ref引用。

环境

1.安装对应版本node，高版本会有依赖下载问题 2.安装依赖 npm install . 3.运行项目 npm run dev