props是實現父元件傳遞訊息給子元件的，子元件不能通過這個傳值給父元件

用法如下:

parent.vue（這是父元件檔案）

<template>
  <div class="container">
    <div>
        <child :msgtochild="message"></child>
    </div>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  name: 'app',
  data () {
    return {
       msg: '書屋',
      search:false,
      message:'這是傳送給子元件的訊息'
    }
  },
  components: {
       child
  },
  directives: {
    focus: {
        inserted: function (el, {value}) {
            if (value) {
                el.focus();
            }
        } 
    }
  },
  methods:{
        changeStatus:function(el){
            this.search=!this.search;
        }
  },
  mounted:function(){
      layui.use(['layer', 'form'], function(){
          var layer = layui.layer
          ,form = layui.form;
      });
  }
}
</script>
<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.bounce-enter-active {  animation: bounceInRight .5s;} /* 剛載入時的動畫 */
/*.bounce-leave-active {  animation: bounce-out .5s;}*/
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }


  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }


  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }


  75% {
    transform: translate3d(10px, 0, 0);
  }


  90% {
    transform: translate3d(-5px, 0, 0);
  }


  to {
    transform: none;
  }
}
@keyframes bounce-out {  0% {    transform: scale(1);  }  50% {    transform: scale(1.5);  }  100% {    transform: scale(0);  }}




h1, h2 {
  font-weight: normal;
}


ul {
  list-style-type: none;
  padding: 0;
}


li {
  display: inline-block;
  margin: 0 10px;
}


a {
  color: #42b983;
}
</style>
 

子元件要想拿到父元件傳過來的值就得用props這個屬性，而不能放在data裡邊

child.vue（這是子元件檔案）

<template>
    <div class="layui-container">
        <a href="">{{msgtochild}}</a>
    </div>
</template>
<script>
import '../assets/style.less'
export default {
  name: 'app',
  props:{
    'msgtochild':String //這個的String是用來宣告這個子元件想要父元件傳過來值的型別，一般為String,Object
  },
  data () {
    return {
      msg: '書屋',
      search:false,
      bookList:[
        {'bookimgsrc':'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3965705221,2010595691&fm=27&gp=0.jpg','bookname':'標題','dongtai':'更新動態'},
        {'bookimgsrc':'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3965705221,2010595691&fm=27&gp=0.jpg','bookname':'標題','dongtai':'更新動態'},
        {'bookimgsrc':'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3965705221,2010595691&fm=27&gp=0.jpg','bookname':'標題','dongtai':'更新動態'}
      ],
      somedata:[]
    }
  },
  methods:{
        changeStatus:function(el){
            this.search=!this.search;
        }
  },
  mounted:function(){
      layui.use(['layer', 'form'], function(){
          var layer = layui.layer
          ,form = layui.form;
      });

      this.$emit('childMethod');
  },
  created(){
    console.log(this.$route.params.id);
    this.$http.jsonp('https://suggest.taobao.com/sug?code=utf-8&q=數碼').then(function(res){
      this.somedata=res.body.result;
    }, function(res){
          // console.log(res)
    });
  }
}
</script>

<style scoped>
.list{
  padding: 5px 0;
  border-bottom: 1px solid #DDD;
}
.list img{
  width: 100%
}
.title a{
  font-size: 18px
}
</style>