VUE 实现动态组件

<template>
  <div   class="logmangement">
    <!--  上面按钮-->
    <div class= "buttontop" >
      <el-form class="button">
        <el-button @click="loginlog"  :type="button11" size="mini">登录日志</el-button>
        <el-button @click="managementlog"  :type="button22" size="mini">操作日志</el-button>
      </el-form>
    </div>
    <!--  组件-->
    <div>
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
  import LogManagements from "./LogManagements";
  import LoginLog from "./LoginLog";
  export default {
    name: "LogManagement",
    components: {LogManagements,LoginLog},
    data(){
      return{
        currentComponent:'LoginLog',
        button11:"primary",
        button22:""
      };
    },
    methods:{
      loginlog(){
        this.currentComponent = 'LoginLog';
        this.button11="primary";
        this.button22=""
      },
      managementlog(){
        this.currentComponent = 'LogManagements';
        this.button22="primary";
        this.button11=""
      },

    }
  }
</script>

<style scoped>

</style>