Vue动态组件渲染

今天药忘吃喽~ 2022-11-10 05:38 270阅读 0赞

## 子组件封装 ##

#### 动态切换的子组件一 ####

<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>