自定义组件-component

单个组件引入
父页面：

<myTeam :lanchData="teamData"></myTeam>

import myTeam from './myRelevance/myTeam'
export default {
  data() {
	teamData: {}
  },
  components: {
    myTeam
  }
}

子页面：

export default {
  props:{
    lanchData: {
      type: Object,
      default: {}
    }
  }
}

向父页面传值
子页面：

<el-table @row-dblclick="itemDblclick">...

export default {
  methods: {
    // 向父页面传值
    itemDblclick(row) {
      this.$parent.listenToRowData(row); // 方法一
      this.$emit("listenToRowData", row); // 方法二
    },
  }
}

父页面：

采用方法一传值时

export default {
  methods: {
    // 接收子页面数据
    listenToRowData(row) {
      console.log('parent', row);
    }
  }
}

采用方法二传值时，需加上v-on监听事件

<myTeam v-on:listenToRowData="showRowData"></myTeam>

export default {
  methods: {
    // 接收子页面数据
    showRowData(row) {
      console.log('parent', row);
    }
  }
}

向父页面传多个值’arguments’
子页面：

that.$emit('closeDialogAndGetId', 'commit', res.data[0].id)

父页面：

<approval :otherData="approvalLanchData" :approvalIssueFrom="'isPhaseApprovalIssue'"
 v-on:closeDialogAndGetId="setDialogVisible(arguments)" :key="new Date().getTime()"></approval>

setDialogVisible(val) {
  if (val[0] == 'delete') {
    this.rePlanForm.approvalIssuanceID = ''
  }
  else {
    this.rePlanForm.approvalIssuanceID = val[1]
  }
  this.dialogVisibleApprovalIssue = false
},

多个组件引入

<component
  v-for="(item, index) in projectItemData"
  :is="(item.code == currentCode) ? item.path : ''"
  :key="index">
</component>

import myTeam1 from './myRelevance/myTeam1'
import myTeam2 from './myRelevance/myTeam2'
import myTeam3 from './myRelevance/myTeam3'
export default {
  data() {
	projectItemData: [
	  { code: 'one', path: 'myTeam1' },
	  { code: 'two', path: 'myTeam2' },
	  { code: 'three', path: 'myTeam3' }
    ]
  },
  components: {
    myTeam1,
    myTeam2,
    myTeam3
  }
}