vue 实现组件嵌套和父子组件传值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>大世界酒店运行基本情况</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/buttons.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component(
'myprocess',
{
props:['id','process'],
template:
'#myprocess'
}
);
Vue.component(
'mypanel',
{
props:['id','seq'],
template:'#mypanel'
}
);

Vue.component(
'panelbodycontent',
{
template:''
}
);
Vue.component(
'conn',
{
props:['mprs','mpas'],
template:'#conn'
}
);
Vue.component(
'paneltitlecontent',
{
props:['id','aa','ss'],
template:'#paneltitlecontent'
}
);

</script>
</head>
<body>
<template id="paneltitlecontent">
        <p>
         <h3>
         <span>
         <strong>
         {{aa}}
         </strong>
         </span>
         {{ss}}间
         </h3>
        </p>
    </template>
    <template id="conn">
     <div>
     <div class="tab-pane fade in active">
<div 
is="myprocess" 
v-for="mpr in mprs" 
:key="mpr.id" 
:process="mpr.process">
</div>
<div 
is="mypanel" 
v-for="mpa in mpas" 
:key="mpa.id" 
:seq="mpa.seq">
</div>
</div>
</div>
    </template>
    <template id="myprocess">
     <!--进度条-->
<div class="progress">
     <div 
     class="progress-bar progress-bar-striped active" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0" 
     aria-valuemax="100" 
     style="width:60%">
         <span>
         {{process}}
         </span> 
        </div>
</div>
    </template>
    <template id="mypanel">
        <div class="panel-group">
<!--panel-{{seq}}-->
     <div class="panel panel-default">
     <!--panel-{{seq}}-heading-->
         <div class="panel-heading">
         <h4 class="panel-title">
                <a href="#panel{{seq}}" data-toggle="collapse" data-parent="#bigpanel">
<div id="paneltitlecontent" v-for="ptc in ptcs" :key=ptc.id :aa="ptc.aa" :ss="ptc.ss"></div>
</a>
     </h4>   
  </div>
    <!--panel-{{seq}}-body-->
         <div class="panel-collapse collapse in">
             <div class="panel-body">
                 <div is="panelbodycontent"></div>
                 </div>
     </div>     
</div>
        </div>
    </template>
<div  class="container"> <!--标签页-->
<ul id="myTab" class="nav nav-tabs">
    
     <li class="active"><a href="#one"  data-toggle="tab">单人间</a></li>
        
        <li ><a href="#two" data-toggle="tab">双人间</a></li>        <li ><a href="#three" data-toggle="tab">三人间</a></li>        <li ><a href="#four" data-toggle="tab">四人间</a></li>
        
        <li class="dropdown">
        
         <a href="#" data-toggle="dropdown">
            
             CODE
                
                <span class="caret">
                
                </span>
                
          </a>
            
             <ul class="dropdown-menu">
                
                 <li><a href="#CHINA" data-toggle="tab">CHINA</a></li>
                    
                    <li><a href="#CSS" data-toggle="tab">CSS</a></li>
                
             </ul>
            
        </li>
    
    </ul>
      <!--标签页内容-->
    
    <div class="tab-content">
     <div id="sad">
     <conn></conn>
     </div>
     <script type="text/javascript">
     new Vue
     (
     {
     el:
     '#sad',
     data:
     function()
     {
     return
     {
mydatas:
[
{
mprs:
[
{
id:1,
process:'60%'
}
],
mpas:
[
{
id:1,
seq:'one'
}
],
ptcs:
[
{
id:1,
aa:'单人间',
ss:'8',
}
]
}
]
     }
     }
     }
     );
     </script>
     <div>   
     <p><h3><span><strong>空闲房间数量</strong></span>{{kx}}间</h3></p> <p><h3><span><strong>预约房间数量</strong></span>{{kx}}间</h3></p>
<p><h3><span><strong>已用房间数量</strong></span>{{yy}}间</h3></p>
</div>     
        <div id="two" class="tb-pane  fade"></div>
        
        <div id="three" class="tab-pane fade"></div>
        
        <div id="four" class="tab-pane  fade"></div>
    
     </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    https://blog.csdn.net/toyourwindy/article/details/77773918
      

  2.   

    我改成这样了
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>大世界酒店运行基本情况</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/buttons.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>


    var myprocess=Vue.component(
    'myprocess',
    {
    props:['id','process'],
    template:'#myprocess'
    }
    );
    var paneltitlecontent=Vue.component(
    'paneltitlecontent',
    {
    props:['id','aa','ss'],
    template:'#paneltitlecontent'
    }
    );
    var panelbodycontent=Vue.component(
    'panelbodycontent',
    {
    template:''
    }
    );
    var mypanel=Vue.component(
    'mypanel',
    {
    props:['id','seq'],
    template:'#mypanel',
    components:{paneltitlecontent,panelbodycontent}
    }
    );
    Vue.component(
    'conn',
    {
    props:['mprs','mpas'],
    template:'#conn',
    components:{myprocess,mypanel}
    }
    );
    </script>
    </head>
    <body>
     <template id="conn">
         <div>
         <div class="tab-pane fade in active">
    <div 
    is="myprocess" 
    v-for="mpr in mprs" 
    :key="mpr.id" 
    :process="mpr.process">
    </div>
    <div 
    is="mypanel" 
    v-for="mpa in mpas" 
    :key="mpa.id" 
    :seq="mpa.seq">
    </div>
    </div>
    </div>
        </template>    <template id="myprocess">
         <!--进度条-->
    <div class="progress">
         <div 
         class="progress-bar progress-bar-striped active" 
         role="progressbar" 
         aria-valuenow="60" 
         aria-valuemin="0" 
         aria-valuemax="100" 
         style="width:60%">
             <span>
             {{process}}
             </span> 
            </div>
    </div>
        </template>    <template id="mypanel">
            <div class="panel-group">
    <!--panel-{{seq}}-->
         <div class="panel panel-default">
         <!--panel-{{seq}}-heading-->
             <div class="panel-heading">
             <h4 class="panel-title">
                    <a href="#panel{{seq}}" data-toggle="collapse" data-parent="#bigpanel">
    <div id="paneltitlecontent" v-for="ptc in ptcs" :key=ptc.id :aa="ptc.aa" :ss="ptc.ss"></div>
    </a>
         </h4>   
      </div>
        <!--panel-{{seq}}-body-->
             <div class="panel-collapse collapse in">
                 <div class="panel-body">
                     <div is="panelbodycontent"></div>
                     </div>
         </div>     
    </div>
            </div>
        </template> <template id="paneltitlecontent">
            <p>
             <h3>
             <span>
             <strong>
             {{aa}}
             </strong>
             </span>
             {{ss}}间
             </h3>
            </p>
        </template>
       
      
    <div  class="container"> <!--标签页-->
    <ul id="myTab" class="nav nav-tabs">    
         <li class="active"><a href="#one"  data-toggle="tab">单人间</a></li>        
            <li ><a href="#two" data-toggle="tab">双人间</a></li>
            <li ><a href="#three" data-toggle="tab">三人间</a></li>
            <li ><a href="#four" data-toggle="tab">四人间</a></li>        
        </ul>
          <!--标签页内容-->
        
        <div class="tab-content">
         <div id="sad">
         <conn v-for="mydata in mydatas" :key="mydata.id" :mprs="mydata.mprs"></conn>
         </div>
         <script type="text/javascript">
         new Vue
         (
         {
         el:
         '#sad',
         conponents:
         {
         data:
         function()
         {
         return
         {
         mydatas:[{id:1,mprs:[{id:1,process:'60%'}],mpas:[{id:1,seq:'one'}],ptcs:[{id:1,aa:'单人间',ss:'8',}]}]
         }
         },
         template:'#conn'
         }
         }
         );
         </script>
         </div>
        </div>
    </body>
    </html>
    还剩下组件传值问题咋搞