Vue props传参

一 字符串传参

传参是父组件做的事，在子组件template标签中，使用子组件标签时添加属性 key value的形式进行传参。这里传了3个 key value。

<template>
  <div>
    <Student name="李四" age="18" sex="男"></Student>
  </div>
</template>

参数的接收是子组件做的事，在子组件中，父组件需要用到的参数必须不能写值，因为要用的值是要从父组件当中接收的。通过props数组就可以进行接收，接收时可以指定好参数类型,方便后面计算。

export default {
  props:{
    name:String,
    age:Number,
    sex:String
  },
}

配好参数以后在子组件中进行渲染

<template>
  <div>
    <h2>学生姓名:{
  { name }}</h2>
    <h2>学生性别:{
  { sex }}</h2>
    <h2>学生年龄:{
  { age }}</h2>
  </div>
</template>

得到的结果是：

二 传