vue父组件向子组件传值

父组件：

<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>

<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>