如果元素有子元素，如何檢查 Vue3？

Question

我想檢查（Vue 3 ）一個元素是否有子元素。

該文檔解釋了如何訪問 DOM 元素，但我不知道如何檢查內容。 具體來說，我不知道變量是什么類型（下面代碼中的container ），因此不知道如何檢查它的大小/結構。

我想象的通用代碼應該在下面，但它沒有（這只是展示這個想法的通用代碼，我使用.vue組件所以代碼被編譯）

 const app = Vue.createApp({ setup() { let container = ref(null) if (container.value === null) { console.log("container is empty") } else { console.log("container has elements") } return {} } }).mount("#app")

 <div id="app"> <div ref="container"> <div></div> </div> </div>

Answer 1

檢查Vue3 setup API的 上下文部分

<template>
  <div class="container">
    <slot></slot>
    <span v-show="hasChildren">hasChildren</span>
  </div>
</template>

<script>
export default {
  // ...
  setup(props, { slots }) {
    let hasChildren = false;
    if (slots.default) {
      hasChildren = slots.default().length >= 1;
    }
    return { hasChildren };
  }
}
</script>

這是運行示例：

https://codepen.io/rabelais88/pen/xxdBmRP

它是一個帶有組件的抽象，因此可以在以后重復使用。

Answer 2

您代碼中的變量container是HTMLElement類型 - 因此您可以檢查其childElementCount屬性是否大於零。

 const app = Vue.createApp({ mounted() { console.log(this.$refs.container.childElementCount); console.log(this.$refs.emptyContainer.childElementCount); } }).mount("#app")

 <div id="app"> <div ref="container"> <div></div> </div> <div ref="emptyContainer"></div> </div>

Answer 3

您可以在onMounted鈎子中使用container.value.children來檢查引用的元素是否有子元素，因為在此鈎子中渲染了 DOM。

 const app = Vue.createApp({ setup() { let container = Vue.ref(null) Vue.onMounted(() => { if (container.value && container.value.children.length) { console.log("container has elements") console.log(container.value.children) } else { console.log("container is empty") } }) return { container } } }).mount("#app")

 <script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script> <div id="app"> <div ref="container"> <div>test</div> </div> </div>