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>
...全文
980 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>
还剩下组件传值问题咋搞
Vue父子组件传值的一些坑
主要介绍了Vue父子组件传值的一些坑，帮助大家更好的理解和使用vue父子组件，感兴趣的朋友可以了解下
前端面试题，vue详解（组件传值）
看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。 组件之间传值主要分两种 1、父子组件：props方法、ref方法、children和parent方法、 emit方法 2、非父子组件：公共bus.js、attrs/listeners、vuex 一、父子组件传值 1、props方法 父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象 父组件 // 引入子组件 import child from './child' export default { component
详解vuejs几种不同组件（页面）间传值的方式
本篇文章主要介绍了详解vuejs几种不同组件（页面）间传值的方式，具有一定的参考价值，有兴趣的可以了解一下
图文介绍Vue父组件向子组件传值
本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解，一起学习参考下吧。
Vue.js中兄弟组件之间互相传值实例
本篇文章主要介绍了Vue.js中兄弟组件之间互相传值实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript

87,968

社区成员

224,677

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章