vue2.0是怎么嵌套父子组件的？

小宇
  • 423

如下图，为啥我这只能显示第一个子组件呢？

clipboard.png

vue.js
回复
阅读 3.3k
2 个回答
得票最新
Dont
  • 6.9k
✓ 已被采纳

clipboard.png

update:

<body>
    <div id="app">
    <parent></parent>
      
 </div>
 <template id="parent">
   <child1></child1>
   <child2></child2>
 </template>
  <template id="child1">
  <p>1</p>
 </template>
<template id="child2">
   <p>2</p>
 </template>
  <script>
        Vue.component('parent',{
      template:'#parent',
      components:{
        'child1':{
          template:'#child1'
        }, 
        'child2':{
          template:'#child2'
        }
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
       
      },
      methods:{
        
      }
    })
  </script>
</body>

简单搬一些你的代码，发现有报错， parent的template给个div把里面的标签都包起来吧
clipboard.png

回复
KingMario
  • 7.2k

这里好像没涉及到嵌套组件吧，不显示第二个组件的问题楼上已经给你指出来了。

关于嵌套组件，可以参见官方文档，组件的章节里有说明，需要添加 name 属性。
此外，如果是 A>B>A>B... 这样的嵌套方式，可能参见下面的例子：

https://jsfiddle.net/hL04Lozq/

这里的组件选项可以不加 name，注意一定要有一个控制结束嵌套的条件。

回复
撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
宣传栏
3329