props中,你需要知道的这些

161 阅读2分钟

1、你需要认识一下props

父子组件之间是如何通信的呢,他们之间是不可能老死不相往来的,父子之间的通信就会引起我们的探索的欲望。

中国传统的父子关系大多数是严肃的,父子之间的交流也是格外的严厉的,而父子组件之间的通信就是有一种这样的关系。在vue组件中父子之间最常用的方式就是propsemit方式进行数据交流,而现在我们需要说明的就是父组件向子组件进行数据通信,那么props就会显得尤为重要了。

子组件接收父组件传递的数据就想函数中传参的形式,父组件需要传递的数据就是函数调用时传递的实参,而在父组件中使用子组件的时候,子组件中绑定的属性,就像是形参,父组件可以将数据传递给子组件,像极了函数调用时候的实参传递给形参。

2、props你需要知道的小脾气

  • props是父组件向子组件传递数据的方式,所以他是一种向下传递机制。
  • props父子间通信时,数据是子组件不可以修改的。
  • 父传子时,父亲的数据也绝大多数情况下是前端请求,后端传递来的数据。

3、父子组件中如何传值

父组件中想要传递的数据,需要事先定义好data变量或者从后端请求过来。

<hhz :age="agedata" :id="didata" />
//上面的是在父组件中中使用子组件,并将子组件中props里面的数据属性绑定到
//子组件上面
//然后属性上绑定的变量是父组件中的数据或者是请求回来的数据。

子组件中定义props

export default {
  name: 'hhz',
  props: ['age','id']
}

上面的props的书写方式是不太建议的,因为这样可能会出现变量类型的错误,所以一般是采用对象的形式来指定子组件接收到的数据类型和默认值。

export default {
  props: {
    age: {
      type: String,
      default: '25'
    },
    id: {
      type: Number,
      default: 3
    }
  }
}

如果在对象形式的props中,某个变量设置了required: true属性的话,那个这个变量是必须要传入的,相反为false 时,传值是可以自我选择的。

以上就是父组件通过props向子组件传值的全部的过程了,还有一些比较细致的东西,可以自己去查阅资料,我觉得这些已经够使用了!