版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/87448047
一、show
1、介绍
-
组件：App、MyHeader、Mybody、MyNav、MyMain、MyFooter（App是所有的父组件，Mybody是 MyNav和MyMain 的父组件）
-
数据data：[{name: ‘bty’, age: 12}, {name: ‘张三’, age: 13}, {name: ‘oppen’, age: 14}]
-
传值：将全局数据data传给App组件、App再传给MyBody组件、MyBody再传给MyNav组件，并在其中把传来的数据展示出来。
2、展示
点击显示数据后，导航栏显示数据：
二、code
dome.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<script type="text/javascript" src='./src/js/vue.js'></script>
<link rel="stylesheet" type="text/css" href="./src/css/index.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src='./src/js/index.js'></script>
</body>
</html>
./src/js/index.js
let MyHeader = {
template: `<div id="header">我是头部</div>`,
};
let MyNav = {
template:
`<div id="nav">
我是导航栏<br/>
<button @click="changeShow">点我显示数据</button>
<ul v-if="dataShow">
<li v-for="(item, index) in data">{{index}}、{{item.name}} ：{{item.age}}</li>
</ul>
</div>`,
data() {
return {dataShow: false};
},
methods: {
changeShow() {
this.dataShow = !this.dataShow;
}
},
props: ['data'],
};
let MyMain = {
template: `<div id="main">我是正文</div>`,
};
let MyBody = {
components: {
'my-nav': MyNav,
'my-main': MyMain,
},
template:
`<div id="body">
<my-nav :data="data"></my-nav>
<my-main></my-main>
</div>`,
props: ['data'],
};
let MyFooter = {
template: `<div id="footer">我是底部</div>`,
};
let App = {
components: {
'my-header': MyHeader,
'my-body': MyBody,
'my-footer': MyFooter,
},
template:
`<div>
<my-header></my-header>
<my-body :data="data"></my-body>
<my-footer></my-footer>
</div>`,
props: ['data'],
};
let vm = new Vue({
el: document.getElementById('app'),
components: {
'app': App,
},
template: '<app :data="data"/>',
data() {
return {
data: [{name: 'bty', age: 12}, {name: '张三', age: 13}, {name: 'oppen', age: 14}]
};
}
});
./src/css/index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header,
#body,
#footer {
width: 100%;
border: 1px solid #000;
}
#header,
#body,
#nav,
#footer {
float: left;
}
#header {
height: 60px;
}
#body {
margin: 10px 0;
height: 400px;
}
#nav,
#main {
display: inline-block;
height: 100%;
}
#nav {
width: 25%;
border: 2px solid blue;
}
#main {
width: 70%;
float: right;
border: 2px solid red;
}
#footer {
height: 50px;
}