vue2混入声明组件、交互流程

vue2中可以使用混入，在当前页面中将混入中声明的组件进行注入

写法

父组件声明混入文件：

复制代码

import mixComponent from "@/mixins/mixComponent"
export default {
	mixins:[mixComponent]
}

mixComponent文件定义方式，类似于一个vue文件的script区域

我的场景是这样的，在父组件使用混入，混入了一个文件，这个混入内又引用了两个组件，GenerateComponent组件是一个按钮，点击按钮后，生成文件，传给组件：FileListComponent让文件列表展示出来，其中涉及到混入文件中如何跟引入的组件进行交互：组件内使用value接收混入混入文件内传递的数据

复制代码

const mixins = {
	data() {
		generateParams: {
			taskId: Number
		},
		FileListObj: {
        	FileList: [],
      }
	},

   // 此处声明了两个属性，第一个属性是一个按钮组件，第二个属性是一个文件列表的组件，用于展示点击按钮后生成的文件列表
	computed: {
		generateBtn() {
			const generateBtn = {
				column: [
			          {
			            prop: 'generateProp',
			            component: 'GenerateComponent',
			            display: true,
			            span: 2
			          },
			          {
			            prop: 'fileListProp',
			            component: 'FileListComponent',
			            label: '文件',
			            display: true,
			            span: 24
			          }
			      ]
			}
			return courtAuthChangeBtn;
		}
	},

	watch: {
		'form.taskId'(newVal, oldVal) {
			console.log("监听到taskId发生变动")
			this.generateParams.taskId = newVal;
		}
	},	

	methods: {
		updateFileList(newFileList) {
			console.log("此方法用来改变文件列表组件的value值，达到动态展示文件列表的目的")
			this.FileListObj.fileList = newFileList
			this.form.fileListProp = this.FileListObj
		}
	}
	
}
export default mixins;

组件GenerateComponent定义如下：

复制代码

<template>
  <div>
    <el-button class="btn-class" :disabled="displayFlag" type="text" size="medium" @click="generateFile">
      生成文件
    </el-button>
  </div>
</template>
<script>
// 这是后台接口
import {generateFile} from "@/api/tasks/opencourt";
export default {
	name: "GenerateComponent",
	props: {
    value: {
      taskId: Number
    }
  },
 data() {
    return {
      displayFlag: false
    }
  },
  methods: {
  	generateFile() {
		// 生成文件
		generateFile(this.value).then(res => {
			console.log("文件返回： ", res)
			// 重要：这里这行是关键，是此组件的文件列表展示到文件列表组件上
	        this.$root.updateFileList(res.data.data)
		})
	},
	calDisplay() {
	   // 计算按钮是否可点击
	}
  }
}

</script>

组件FileListComponent如下：

复制代码

<template>
<div>
  <avue-crud :option="fileListOption"
             :data="value.fileList">
    <template slot='filename' slot-scope="{row,index}">
            <span v-if="row!==undefined && row.url  && row.url.length>=1">
              <a style="color: #409EFF;cursor: pointer" @click="filePreview(row.url)">{{ row.filename }}</a>
            </span>
    </template>
  </avue-crud>
</div>
</template>

export default {
	name: "FileListComponent",
	props: {
    value: {
         fileList: []
    },
  },
  
}

这里的FileListComponent主要用来展示文件列表;

这里主要表达了，混入文件引入两个组件，如何让这两个组件进行交互，可以在混入文件中定义影响组件数据的方法，然后在组件中使用this.$root.updateFileList(res.data.data) 来调用混入文件中定义的这个方法达到数据交互目的