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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值