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, '子组件传过来的值')
}
}
}