今天寫代碼，組合使用了，n-modal,n-datatable和n-select,在n-select組件出問題，無法展開，并且報錯

Failed to execute 'insertBefore' on 'Node': This node type does not support this method.
Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at
Cannot read properties of null (reading 'emitsOptions')

先展示錯誤的demo代碼

<script setup lang="ts">
import {  ref } from 'vue'
import {  NButton, NModal } from 'naive-ui'
import ModuleView from './ModuleView.vue';
const showModal_1 = ref(false)

</script>
<template>
  <div>
    <n-button type="info" @click="showModal_1 = true">點擊展開modal</n-button>
    <n-modal v-model:show="showModal_1">
      <ModuleView/>
    </n-modal>
  </div>
</template>

ModuleView是抽象出來的組件，問題就出在這個抽象里面，下面是子組件代碼；

<script setup lang="ts">
import { h, reactive, ref } from 'vue'
import { NSelect, NDataTable, NButton, NModal, NCard } from 'naive-ui'
const optionsRef = ref([
  {
    label: '1',
    value: 1
  },
  {
    label: '2',
    value: 2
  }
])

const columns = reactive([
  {
    title: '序號',
    key: 'index'
  },
  {
    title: '組件A',
    key: 'comp_a',
    render: () =>
      h(
        NSelect,
        {
          options: optionsRef.value,
          style: { width: '200px' }
        },
        {}
      )
  },
  {
    title: '組件B',
    key: 'comp_b',
    render: () =>
      h(NSelect, {
        options: optionsRef.value,
        style: { width: '200px' }
      })
  }
])
const data = ref<any>([])
const handelAdd = () => {
  const item: any = {
    index: data.value.length + 1,
    comp_a: 1,
    comp_b: 2
  }
  data.value.push(item)
}
const showModal_2 = ref(false)
</script>

<template>
  <div>
    <n-card>
      <n-button @click="handelAdd">+</n-button>
      <n-data-table :columns="columns" :data="data"> </n-data-table>
    </n-card>
  </div>

  <n-modal v-model:show="showModal_2"> </n-modal>
</template>

<style scoped></style>

很明顯這是一個嵌套modal的代碼。
效果圖:

大伙都知道，vue2的時候template里面第一層只能寫一個組件:

<template>
	<div>
		<div>你好</div>
		<a>hello world<a/>
	</div>
</template>

但是到了vue3就支持多組件了，比如:

<template>
	<div>你好</div>
	<a>hello world<a/>
</template>

我寫vue3保留了vue2的習(xí)慣，只寫一個組件，唯獨用modal的時候習(xí)慣寫到主組件外面，因為這個組件是遮罩的，會覆蓋全頁面。
但是問題也出在這，如果直接在modal里面寫兩個組件，naive會直接報錯。

  <div>
    <n-button type="info" @click="showModal_1 = true">點擊展開modal</n-button>
    <n-modal v-model:show="showModal_1">
      <n-button @click="">+</n-button>
      <n-data-table> </n-data-table>
      <n-modal> </n-modal>
    </n-modal>
  </div>

App.vue:11 [naive/getFirstSlotVNode]: slot[default] should have exactly one child
App.vue:11 [naive/modal]: default slot is empty 這個是錯誤報錯

意思是說，modal里面只能有一個子組件。

    <n-modal v-model:show="showModal_1">
      <ModuleView/>
    </n-modal>

但是如果像我這樣，抽象出來，就不會報錯，會影響子組件內(nèi)部的調(diào)用,導(dǎo)致我一直以為是Select或者DataTable寫錯了。
解決辦法也很簡單，直接把子組件寫成一整個div就好。文章來源地址http://www.zghlxwxcb.cn/news/detail-846104.html

到了這里，關(guān)于vue3 ,naive-ui,嵌套modal踩坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！