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

weixin_40919495 2018-07-13 02:25:59
<!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>
...全文
969 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
weixin_40919495 2018-07-14
  • 打赏
  • 举报
回复
我改成这样了
<!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>
还剩下组件传值问题咋搞