自定义vue组件，并调用自定义方法

1 背景

某项目，需要显示多个表单内容，如果每个单独定义到菜单中，菜单显得非常臃肿，因此使用一个界面显示所有表单内容，表单内容使用组件实现。

2 实现过程

整个过程分3步：动态注册组件、显示需要组件、调用组件方法进行显示。

2.1 编写子组件

创建目录components，存放所有的要显示的子组件；
在components下，创建t2018f1.vue文件，内容如下：

<template>
  <div>
    <el-form ref="form" size="small" label-width="130px">
      <el-form-item label="年度AAAAAAAAAAAA" >
        <el-input :v-model="year" style="width: 370px;"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'T2016f1',  // 本组件名称，在父页面中生成组件列表时，用到，后面
  data() {
    return {
      year: 0
    }
  },
  created() {
  },
  methods: {
    setyear(year) {
      this.year = year
      console.log(year)
    }
  }
}
</script>
<style scoped>
</style>

复制一份文件为t2018f2.vue。用于表示不同的子组件。

2.2 注册组件

1. 静态注册

如果子组件比较少，可以使用静态注册的方式。

import t2018f1 from '../components/t2016f1'
export default {
  name: 'Dept',
  components: { t2018f1 }
}
<t2018f1 ref="t2018f1" />  // 显示的地方

2. 动态注册

本案例中，子组件很多，有几十个，一个一个注册容易遗忘和出错，因此采用动态注册方式。有2种情况，一个是需求情况，多个只显示一个子组件。另外一种情况是多个组件同时显示。不多说了，直接上代码。

A. 多选一

<template>
  <div class="app-container">
    <div class="head-container">
      <div>222222222222</div>
      <component ref="xxnr" :is="who" />
      <button @click="changeComponent">我变换</button>
    </div>
  </div>
</template>

<script>
const r = require.context('../components', false, /\.vue$/)
const obj = {}
const arr = []
r.keys().forEach(ele => {
  // console.log(ele)
  const fileName = r(ele).default.name
  obj[fileName] = r(ele).default
  arr.push(fileName)
})

export default {
  name: 'Dept',
  components: obj,
  data() {
    return {
      comList: arr, who: 'T2016f1'
    }
  },
  methods: {
    changeComponent() {
      const a = 'T' + '2016' + 'f1'
      if (this.who === a) {
        this.who = 'T2016f2'
      } else if (this.who === 'T2016f2') {
        this.who = a
      } else {
        this.who = 'T2016f1'
      }
      console.log(this.$refs.xxnr)
      this.$refs.xxnr.setyear(2018)
    }
  }
}

B. 同时多显示

<template>
  <div class="app-container">
    <div class="head-container">
      <div>222222222222</div>
      <component v-for="(item,index) in comList" :key="index" :is="item" class="btns" />
    </div>
  </div>
</template>

<script>
const r = require.context('../components', false, /\.vue$/)
const obj = {}
const arr = []
r.keys().forEach(ele => {
  // console.log(ele)
  const fileName = r(ele).default.name
  obj[fileName] = r(ele).default
  arr.push(fileName)
})

export default {
  name: 'Dept',
  components: obj,
  data() {
    return {
      comList: arr
    }
  }
}
</script>
<style scoped>
</style>

2.3 显示和调用代码

已经写到2.2部分了。