Vue手记 - 递归组件

Vue手记 - 递归组件 - 子级不渲染问题解决

• 定义组件

<!-- Html 代码 -->
<div id="app">
	<repeat-com :data="myarray"></repeat-com>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    myarray: [
      { text: "li-1", childs: [{ text: "li-1-1" }, { text: "li-1-2" }] },
      { text: "li-2", childs: [{ text: "li-2-1" }, { text: "li-2-2" }] },
      { text: "li-3", childs: [{ text: "li-3-1" }, { text: "li-3-2" }] }
    ]
  },
  components: {
    "repeat-com": {
      data() {
        return {};
      },
      props: ["data"],
      template: `
      <ul>
       <li v-for="(v,i) in data" :key="i">
        <span>{{v.text}}</span>
        <repeat-com v-if="v.childs" :data="v.childs"></repeat-com>
       </li>
      </ul>
      `
    }
  }
});
</script>
  

• 显示结果：
  

发现子级没有渲染出来 ？？？？？

---

• 查看 console 输出

---

最后找到的原因是：没有给组件定义 name 字段 。

"repeat-com": {
      // 这里加入了一个 name
      // 前面定义单层级组件时一直没定义 name 字段，这时才发现多层级组件中 name 的重要性
      name:'repeat-com',
      data() {
        return {};
      },
      props: ["data"],
      template: `
      <ul>
       <li v-for="(v,i) in data" :key="i">
        <span>{{v.text}}</span>
        <repeat-com v-if="v.childs" :data="v.childs"></repeat-com>
       </li>
      </ul>
      `
    }
    

• 显示结果：
  

• 问题结论：

---

1. 单层组件可以没有 name 定义；
2. 组件递归时必须有 name 定义；
3. 组件递归时的节点名使用的自身 name 。

---