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



Vue中,组件之间的数据递主要通过props和emit实现,其中props用于父组件向子组件递数据,emit用于子组件向父组件递数据。 props的作用是将父组件中的数据递给子组件,子组件通过props接收父组件递过来的数据,从而完成数据的共享。使用props时,需要在子组件中定义props属性,props属性可以是一个数组,数组中的每个元素都是一个字符串,代表该组件需要从父组件中接收的数据的属性名。例如: ```javascript // 父组件 <template> <child-component :msg="message"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { 'child-component': ChildComponent }, data () { return { message: 'Hello, World!' } } } </script> // 子组件 <template> <div>{{ msg }}</div> </template> <script> export default { props: ['msg'] } </script> ``` 在上面的例子中,父组件中定义了一个数据message,然后通过在子组件中使用props来接收这个数据。 除了使用数组的方式来定义props,还可以使用对象的方式来定义props,这种方式可以指定props的类型、默认、是否必须等。例如: ```javascript props: { title: { type: String, required: true }, count: { type: Number, default: 0 } } ``` 在上面的例子中,title属性是必须的,类型是字符串;count属性的类型是数字,有默认0。 使用props时需要注意以下几点: 1. 子组件中的props属性不能直接修改,如果需要修改需要通过$emit方法向父组件发送一个事件。 2. 父组件向子组件递的数据是单向的,即父组件的数据改变不会影响子组件,只有在子组件中使用$emit方法向父组件发送一个事件时,父组件的数据才会改变。 3. props属性的是响应式的,如果父组件中的数据改变了,通过props接收到的子组件数据也会随之改变。 总之,propsVue中组件之间数据递的重要方式,掌握好props的使用方法可以让我们更好地开发Vue应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值