主页 / 问题 / 1117558
Accepted
progervova
Asked:2020-04-29 17:07:41 +0000 UTC2020-04-29 17:07:41 +0000 UTC

Vue3 中的动态组件

  • 772

一个动态 Vue2 组件的简单工作示例

<template>
    <div>
        <h1>O_o</h1>
        <component :is="name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    export default {
        data: () => ({
            isShow: false
        }),
        computed: {
            name() {
                return this.isShow ? () => import('./DynamicComponent') : '';
            }
        },
        methods: {
            onClick() {
                this.isShow = true;
            }
        },
    }
</script>

一切正常，一切都很棒。开始尝试如何使用 Composition API。

<template>
    <div>
        <h1>O_o</h1>
        <component :is="state.name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    import {ref, reactive, computed} from 'vue'

    export default {
        setup() {
            const state = reactive({
                name: computed(() => isShow ? import('./DynamicComponent.vue') : '')
            });

            const isShow = ref(false);

            const onClick = () => {
                isShow.value = true;
            }

            return {
                state,
                onClick
            }
        }
    }
</script>

我们启动，组件没有出现在屏幕上，虽然没有显示错误。还没有人搞过测试版吗？

vue.js

2 个回答

  1. Best Answer

    我们将模板中的所有内容都保留在 Vue2 中

    <template>
    <div>
        <h1>O_o</h1>
        <component :is="name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

    仅使用 defineAsyncComponent 在“脚本”中更改

    您可以在此处了解有关 defineAsyncComponent 的更多信息 https://labs.thisdot.co/blog/async-components-in-vue-3

    或在官方网站 https://v3.vuejs.org/api/global-api.html#defineasynccomponent

    import { defineAsyncComponent, defineComponent, ref, computed } from "vue"

export default defineComponent({
components:{
   MyComponent:defineAsyncComponent(() => import("./DynamicComponent.vue"))
},
 setup(){
const isShow = ref(false);
const name = computed (() => isShow.value ? 'MyComponent': '')

const onClick = () => {
    isShow.value = true;
  }
 }
})
    • 0 
  2. <template>
<div>
    <h1>O_o</h1>
    <component v-if="componentName" :is="componentName"/>
    <button @click="changeComponent">Click me !</button>
</div>
</template>

<script>
import {ref, reactive, computed} from 'vue'
import First from './First'
import Second from './Second'
import Any from './Any'

export default {
name: 'BaseComponent',
components: {First, Second, Any}
    setup() {
        const componentName = ref (null)

        function changeComponent (){
          -> there you may use any logic to determinate another Component 
        you want !
          componentName.value = 'Second'
       }

        return {
            componentName, changeComponent
        }
    }
}
</script>
    • 0

相关问题