我正在构建一个非常简单的Vue应用程序。我是第一次使用Vue.js。我有2个vue组件，我尝试通过单击按钮在它们之间切换。我可以在主页上使用脚本代码在2个vue组件之间切换吗？下面是我的代码。我假设我必须在组件上使用v-show或v-if，或者在组件周围使用div/span来显示和隐藏它们。

App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Display v-if="show" />

   

      <button v-on:click="toggleDisplay()">toggle btn</button>
  </div>

</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import Display from './components/Display.vue'

export default {
    name: 'App',
    components: {
      HelloWorld,
      Display
    },
    data: {
        return {
            selectedComp: "HelloWorld"
        }
    },
    methods: {
        toggleDisplay(comp: string) {
            this.selectedComp = comp;
        }
    }
}
</script>

Display.vue
<template>
    <div class="post">
        <div v-if="loading" class="loading">
            Loading...
        </div>

        <div class="titleBlock text-center">
            <div class="row justify-content-center" style="width:100%;">
                <div class="col-6">
                    Service Title for Page
                </div>
            </div>
        </div>

        <div v-if="byteArray" class="content">

            <img :src="byteArray" />

            <div>{{ createImage }}</div>
            <p>{{ byteArray }}</p> 
        </div>

    </div>

</template>
<script lang="js">
    import Vue from 'vue';

    export default Vue.extend({
        data() {
            return {
                loading: false,
                post: null,
                byteArray: null
            };
        },
        created() {
            this.fetchByteArray();

            // Hide DisplayVue after 5 seconds
            //setTimeout(() => this.byteArray = false, 5000)
            //.then(
            //    setTimeout(() => this.byteArray = true, 2000)
            //    );
            setTimeout(() => this.img = false, 5000)
                .then(
                    setTimeout(() => this.img = true, 2000)
                );
        },
        //watch: {

        //}
        methods: {
            fetchByteArray() {
                this.post = true;
                this.byteArray = true;
                this.loading = null;

                
                fetch('https://localhost:5001/api/Doc/image001.png')
                    .then(response => response.json())
                    .then(bytes => {
                        this.byteArray = "data:image/png;base64," + bytes;
                        this.loading = false;
                        return;
                    })
                    .catch(console.log("Error"));
            }
        },
        computed: {
            createImage() {
                return `<img class="img-fluid" src="data:image/png;base64,` + this.byteArray + `" />`;
            }
        }
    });
</script>