vue内置组件component的使用

<keep-alive>
  <component
    type="type"
    :is="componentName"
    :isEdit="isEdit"
    :ref="componentName"
    @allFormSave="allFormSave"
    :infoData="infoData"
    @nextClick="nextClick"
    @cancleData="cancleData"
    @hello="hello"
  >
  </component>
</keep-alive>

<component/>组件可以根据is的值动态渲染不同的组件

import BasicInfo from './hallComponents/hallWraper/basicInfo.vue'
import DetailInfo from './hallComponents/hallWraper/detailInfo.vue'
import SelfServiceInfo from './hallComponents/hallWraper/selfServiceInfo.vue'

export default {
  name: 'BasicSetting',
  filters: {},
  components: {
    BasicInfo,
    DetailInfo,
    SelfServiceInfo
  },
  methods: {
    checkComp (value) {
      const componentMap = {
          0: 'BasicInfo',
          1: 'DetailInfo',
          2: 'SelfServiceInfo'
        }
      this.componentName = componentMap[value]
    },
    // 子组件调用的方法
    hello (emitValue) {
      console.log(emitValue, '子组件传过来的值')
    }
  }
}

component组件和子组件和普通的父子组件一样，可以通过$emit和props进行父子组件之间的传值