<div id="app">
<div class="parent">
<h3>父组件Parent数据</h3>
<ul>
<li>
<label>姓名:</label>
<span>{{ name }}</span>
<input type="text" v-model="name" />
</li>
<li>
<label>年龄:</label>
<span>{{ age }}</span>
<input type="text" v-model="age" />
</li>
</ul>
</div>
<child :my-name="name" :my-age="age"></child>
</div>
<template id="child">
<div class="child">
<h3>子组件child数据</h3>
<ul>
<li>
<label>姓名</label>
<span>{{ myName }}</span>
<input type="text" v-model="myName" />
</li>
<li>
<label>年龄</label>
<span>{{ myAge }}</span>
<input type="text" v-model="myAge" />
</li>
</ul>
</div>
</template>
html,body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: #f44336;
}
#app {
min-width: 30vw;
background-color: #FFF;
position: relative;
overflow: hidden;
user-select: none;
box-shadow: 0px 5px 43px rgba(0, 0, 0, 0.18);
border-radius: 3px;
padding: 2vw;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
font-size: 24px;
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
padding: 0 20px;
text-align: center;
color: #fff;
}
ul {
margin: 10px;
padding: 0;
list-style: none outside none;
border: 1px solid #ccc;
}
li {
&:not(:last-child) {
border-bottom: 1px solid #ccc;
}
display: flex;
justify-content: space-between;
align-items: center;
}
label {
padding: 10px;
min-width: 50px;
}
span {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 10px;
min-width: 100px;
min-height: 45px;
line-height: 45px;
}
input {
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #ccc;
margin: 10px;
height: 30px;
}
.parent {
background: #607d8b;
padding: 10px;
border-radius: 5px;
color: #fff;
margin: 0 5px;
}
.child {
background: #3f51b5;
padding: 10px;
border-radius: 5px;
color: #fff;
margin: 0 5px;
}
View Compiled
let parent = new Vue({
el: '#app',
data () {
return {
name: 'w3cplus',
age: 7
}
},
components: {
'child': {
template: '#child',
props: ['myName', 'myAge']
}
}
})
View Compiled
This Pen doesn't use any external CSS resources.