vue中props传值

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>

这样一来父组件里边的message发生变化，子组件里边的对应的msgfromparent就会相应的改变