Vue-组件间的几种传参方式简单讲解之-----父子组件间传参

一、传参方式：自定义动态属性+props传参

示例1.1

下面这个是父组件

//html部分
<Banner :imgData="img"></Banner>
//js部分
data(){
    return{
        img:[需要传递的数据]
    }
}

下面是被调用的子组件

//js
props:['imgData']
//也可换成这样的写法---- props:{....}
//props:{...}的具体书写方式请看本文后半部分，抱歉

解析：父组件使用自定义动态属性传参给子组件，如 父组件中使用了 :imgData ，子组件使用props接收的便是 imgData

至于父组件传递给子组件的值便是 父组件data中的 img了

流程：父组件通过在子组件中使用 :imgData属性的方式，将其data中的数据传递给了子组件，而子组件要接收的话需要使用props来接收，并且接收的参数名还得是跟父组件传数据所使用的动态属性同名，也就是在这个例子中，子组件的props也得有imgData参数才能接收到父组件的数据。

在这种传参方式中，传递多个参数的话，有两个接收方式，一个是数组形式，一个是对象方式

二、参数接收方式--数组方式、对象方式

①数组方式

有多少个参数便在props数组中接收多少个参数，记得参数名要跟父组件所使用的动态属性对应上。 

例如，父组件中是<Btn :imgData="img" :sex="datas"  :age="age"/>

那么，子组件的props以数组形式来接收的话应该是 props:["imgData","sex","age"]

②对象方式

父组件传入的参数将作为props对象的键，而值便是类型，也就是说我们可以对传入的参数做一个类型限制

而且，对象方式分为两种，一种是普通接收方式，可以定义类型，另一种是既可以定义类型，也可以定义默认值（重点：请看文章最底部）

1. props对象普通接收方式

父组件<Btn :imgData="img" :sex="datas"  :age="age"/>
-------------------------------------------------------------
子组件props:{
    imgData:Array,
    sex:String,
    age:Number
}

2. props对象定义默认值方式

父组件<Btn :imgData="img" :sex="datas"  :age="age"/>
-------------------------------------------------------------------------
子组件props:{
    imgData:{
        type:Array,
        default:function(){return [require("@/assets/img/xxxx")]}
    },
    sex:{
        type:String,
        default:"男"
    },
    age:{
        type:Number,
        default:1
    },
}

props对象方式传参定义默认值的时候，数组和对象类型需要使用函数返回值的方式