Vue 3 -使用支柱柱加载组件

gab6jxml  于 2023-01-17  发布在  Vue.js
关注(0)|答案(1)|浏览(124)

我有以下组件:

<script setup>

import {computed, onMounted, ref, watch} from "vue";
import {useDialogStore} from "@/store/dialog";
import TableSwitcher from "@/components/Dialogs/Components/TableSwitcher.vue"

let emit = defineEmits(['confirmDialogConfirmed', 'confirmDialogClose'])
let dialogStore = useDialogStore()

let question = computed(() => dialogStore.dialogQuestion)
let mainComponent = ref('')

let props = defineProps({
  open: {
    type: Boolean,
    required: true
  },
  id: {
    type: String,
    default: 'main-dialog'
  },
  component: {
    type: String,
    required: true,
  }
})

watch(props, (newValue, oldValue) => {

    mainComponent.value = props.component

    console.log(mainComponent);

      if(newValue.open === true)
      {
        dialog.showModal()
      }

    },
    {
      deep:true
    }
);

let dialog = ref();

let closeDialog = (confirmAction = false) =>
{
  dialog.close()
  dialogStore.close(confirmAction)
}

onMounted(() => {
  dialog = document.getElementById(props.id);
});

</script>

<template>
  <dialog :id="id">
    <component :is="mainComponent" ></component>
  </dialog>
</template>

为了激活组件,我使用以下命令:

<main-dialog
    v-if="component"
    :component="component"
    :open="true">
</main-dialog>

组件值在单击时创建,并作为 prop 传递给主组件。当我单击激活此组件时,收到以下错误:
一月一日

当我为mainComponentvar硬编码组件名时,组件被正确加载。我在这里做错了什么?

llew8vvj

llew8vvj1#

有很多不同的方法可以解决这个问题。我认为在您的情况下,使用slots是有意义的。但是如果您想保持您的方法,您可以在您的Vue应用程序中全局定义您的组件。

无插槽

const app = createApp({});

// define components globally as async components:
app.component('first-component', defineAsyncComponent(async () => import('path/to/your/FirstComponent.vue'));
app.component('second-component', defineAsyncComponent(async () => import('path/to/your/SecondComponent.vue'));

app.mount('#app');

然后,您可以使用字符串并修复组件中的一些错误:

  • 不要使用id,而是使用template ref来访问dialog元素
  • 对于不变值,使用const代替let
  • prop 已经是被动的,所以你也可以直接在你的模板里面使用 prop ,当从外面改变的时候,它们会自动更新。

x一个一个一个一个x一个一个二个x

带槽

一个三个三个一个

相关问题