Vue嵌套组件的问题

Question

App.vue

<test-tree-view :treeData="treeData"></test-tree-view>

var treeData = [
    {
      name: 'Paragraph one',
      children: []
    }
  ]

TestTreeView.vue

<template>
  <ul>
    <tree-item :data="child" v-for="child in treeData">
      <test-tree-view v-show="child.children" slot="childTreeComponent"
                      :treeData="child.children">
      </test-tree-view>
    </tree-item>
  </ul>
</template>
<style>
</style>
<script>
  import TreeItem from './TreeItem.vue'
  export default{
    name: 'test-tree-view',
    props: ['treeData'],
    mounted: function () {
    },
    data () {
      return {}
    },
    components: {
      TreeItem
    },
    methods: {
      isFloder: function () {
        return this.treeData.children && this.treeData.length
      }
    }
  }
</script>

TreeItem.vue

<template>
  <li>
    <span>{{data.name}}</span>
    <slot name="childTreeComponent"></slot>
  </li>
</template>
<style>
</style>
<script>
  export default{
    props: ['data'],
    data () {
      return {}
    },
    components: {}
  }
</script>

这个是dom的结果

我饿的问题：

为什么在第一个<li>标签的里面会多出来一个<ul>标签呢？

Answer 1

<template>
  <ul>
    <tree-item :data="child" v-for="child in treeData">
      <test-tree-view v-show="child.children" slot="childTreeComponent"
                      :treeData="child">
      </test-tree-view>
    </tree-item>
  </ul>
</template>

你递归了test-tree-view啊， 这个本身就含有一个ul的。
如果不想有，把 v-show 改成 v-if

Answer 2

TestTreeView.vue

里面你自己写的么