父组件:
<template>
<div class="demo" @click='toggle'>
<box-bar v-if='box' :deviceid='id'></box-bar>
</div>
</template>
<script type="text/javascript">
import boxBar from '../components/boxBar'
export default {
name: 'demo',
data () {
return {
box: false,
id: 32432423
};
},
components: {boxBar},
methods: {
toggle () {
this.box = !this.box;
}
}
};
</script>
<style lang="less" scoped>
.demo{position:absolute;width:100%;height:100%;}
*{margin:0;padding:0;}
.item{
position:relative;
width:200px;
height:200px;
background:yellow;
border:1px solid #eee;
float:left;
margin:10px 50px 10px 10px;
font-size:20px;
}
.drop.item{
height:100px;
width:100px;
background:red;
}
.item span {
display:block;
width:100px;
text-align: center;
margin:0 auto;
position:absolute;
bottom:0;
}
.drap-item{
margin-top:100px;
clear:both;
}
.clearboth::after{
content:'';
display:block;
clear:both;
}
.drap-item .drop.item{
position:relative;
float:left;
}
.edit-box{
position:absolute;
left:103px;
top:0;
display:none;
z-index:9999;
width:400px;
height:260px;
font-size:14px;
background:#fff;
border:1px solid #ccc;
}
.edit-box p{
padding:10px;
}
.edit-box p label{
display:block;
float:left;
width:80px;
}
</style>
子组件:
<template>
<div class="hello">
<h1>{{msg}}</h1>
<h2>{{'外部组件传递过来的id:' + deviceid}}</h2>
</div>
</template>
<script>
export default {
name: 'boxBar',
data () {
return {
msg: '我是H1组件',
id: ''
}
},
props: ['deviceid'],
methods () {
},
created () {
alert(this.deviceid); // 获取父组组件传到子组件的值
alert('我已经进入子组件');
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{position:fixed;z-index:999;width:100%;height:100%;background:rgba(0, 0, 0, .75);}
h1,h2{color:#fff;font-size:40px;margin-top:100px;text-align:center;}
</style>