本文主要是介绍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 = newFileListthis.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) 来调用混入文件中定义的这个方法达到数据交互目的
这篇关于vue2混入声明组件、交互流程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
