Vue.js：为什么 $el 返回文本节点

Question

我有以下代码：

<template>
    <custom-child></custom-child>
</template>

export default class Custom extends Vue {
  mounted() {
    console.log(this.$el);                    // Returns a text node (with an empty content)
    console.log(this.$el.nextElementSibling); // Returns a element representing my custom child
  }
}

我很困惑为什么我需要使用

nextElementSibling

，因为我期望

$el

直接返回一个元素。

Answer 1

解决方法如下。

错了

<template>
  <div></div>
  <div>
    ...
  </div>
</template>

正确

<template>
  <div>
  　<div>...</div>
    ...
  </div>
</template>

或

错了

<template>
  <div></div>
  <div>
    ...
  </div>
</template>

正确

<template>
  <div>
  　<div>...</div>
    </router-view>
  </div>
</template>

或

错了

<template>
  <!-- comment -->
  <div>
    ...
  </div>
</template>

正确

<!-- comment -->
<template>
  <div>
    ...
  </div>
</template>

如果您不在“Template”标签内使用“div”标签，您也会遇到同样的问题。