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定义如下：

组件FileListComponent如下：

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

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

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