Vue组件间通信：props详解-优快云博客

本文探讨Vue中props的使用，如何从父组件向子组件传递数据。props允许父组件的数据传递到子组件，但不支持反向传递。在parent.vue中定义prop属性，在child.vue中接收并使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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就会相应的改变