子组件封装
动态切换的子组件一
<template>
<div>
我是多行文本框{{ config.name }}
<div>
<input type="text" />
</div>
</div>
</template>
<script>
export default {
name: 'rx-textarea-config',
props: {
config: Object
},
// keep-alive组件激活时调用(组件激活后需要它做什么)
activated () {
console.log('我是多行文本框的组件激活')
},
// keep-alive组件停用时调用(同理,组件停用后需要它做什么)
deactivated () {
console.log('我是多行文本框的组件销毁')
}
}
</script>
<style>
</style>
动态切换的子组件二
<template>
<div>我是单行文本框{{ config.type }}</div>
</template>
<script>
export default {
name: 'rx-textbox-config',
props: {
config: Object
},
// keep-alive组件激活时调用(组件激活后需要它做什么)
activated () {
console.log('我是单行文本框的组件激活')
},
// keep-alive组件停用时调用(同理,组件停用后需要它做什么)
deactivated () {
console.log('我是单行文本框的组件销毁')
}
}
</script>
<style>
</style>
父组件调用
<template>
<div>
<button @click="btn">按钮切换</button>
<component :is="currentConfig" :config="config"></component>
</div>
</template>
<script>
//引入子组件
import RxTextboxConfig from './components/rxTextbox'
import RxTextareaConfig from './components/rxTextarea'
export default {
name: 'App',
components: {
RxTextboxConfig,
RxTextareaConfig,
}
props: {
config: Object
},
data(){
currentConfig: 'rx-textarea-config',
config: {},
}
methods: {
btn () {
// 按钮切换
if (this.currentConfig === 'rx-textarea-config') {
this.currentConfig = 'rx-textbox-config'
this.config.type = 'VARCHAR'
} else {
this.currentConfig = 'rx-textarea-config'
this.config.name = '我是富文本框'
}
}
}
</script>
<style>
</style>