Vue父子组件传参（父传子）

简介：利用不同球队使用同样的两种组件，头组件(Head.vue)和阵容组件(Module.vue)来显示不同的渲染效果简单解释Vue组件传参(父传子)。

本文将通过一个球队球员阵容组件来简单解释vue组件传参中的父子传参，在本案例中，拥有一个头组件和一个球队阵容模板组件，会根据不同球队的父组件的数据不同而渲染出不同的内容，也就是说每个球队（父组件）中显示的头部信息（Head.vue）和阵容（Module.vue）的数据是不一样的，这里我们将使用两种不同的父子传参方式。

一、头组件。

1 .首先编写创建好头组件Head.vue并在Juve.vue和RealMadrid.vue里引入并注册。


上图的Module组件为第二个阵容组件，这里可以先忽略。
2 .然后在父组件Juve.vue中使用头组件，并通过两个自定义属性分别向子组件传递值和方法。

以上Head组件中的:tName和:tMet均为自定义属性分别向子组件传递值和方法，其传递的值team来自父组件的data,方法Hola来自父组件的methods中。
data(){

    return{
        team:{
        name:'尤文图斯',
        players:['C罗','莫拉塔','基耶萨','麦克肯尼','阿图尔','拉姆塞','夸德拉多','德米拉尔','得里赫特','达尼洛','什琴斯尼'],
        img:require("../assets/juve.webp")
        },
        ModeVer:''
    }
},
methods:{
    Hola(){
        console.log(this.team.name + '必胜');
    }
}

3 .回到子组件Head.vue中使用props数组接住来自父组件的值和方法。

props:['tName','tMet']
props数组中的'tName'和'tMet'分别对应父组件Juve.vue传来的值team和方法Hola，再接收到team和Hola方法后我们便可以在子组件中使用他们了。

4 .因此下一步，我们就在子组件中将team渲染在Head上并实现一个点击队名打印该队必胜的小功能(这里的功能函数来自父组件也就是Hola)。

以上代码可以看出在h1标签上绑定了点击事件tMet,而子组件的tMet则正是父组件传来的Hola方法。
因此点击队名会在控制台打印“该队必胜”。

上图为渲染效果，下图为点击事件触发tMet(此处的tMet就是父组件中的Hola方法)

5.接下来用同样的方法将RealMadrid.vue的数据及方法传到其Head组件（操作是一样，只是里面的Hola方法不一样，为点击后弹窗提示“该队必胜”）
data(){

        return{
            team:{
                name:'皇家马德里',
                players:['阿扎尔','本泽马','维尼修斯','克洛斯','卡塞米罗','巴尔韦德','马塞洛','瓦拉内','拉莫斯','卡瓦哈尔','库尔图瓦'],
                img:require('../assets/rmd.png')
            }
        }
    },
    methods:{
        Hola(){
            alert(this.team.name + '必胜');
        }
    }

渲染效果及点击事件如下：

二、阵容组件。
在编写头阵容组件时我们换一种v-bind的传参方式，

1. 首先在components文件夹下创建阵容模板Module.vue，并命名为Module

name:'Module'

写好阵容模板的样式

2 . 创建两个父组件,Juve.vue和RealMadrid.vue，引入子组件Module并注册

此处需要使用v-bind向子组件传递team对象，其中v-bind:后跟的值为子组件所接收到的参数名。

3.回到子组件Module中接收数据

export default {

props:{
    team:{
        type:Object
    }
}

}

在子组件的props中接收父组件传来的参数
team为所要接收的参数名，与父组件中v-bind:后跟的值一致，type为所所接收的参数的类型，因为父组件传来的team为一个对象形式，因此此处type:Object,到此，Module子组件就接收到了来自juve.vue父组件的参数了。

4.在子组件中将接收到的数据渲染到Module上

在Juve.vue得到的效果图就是这样的：

5.采用同样的操作在RealMadrid.vue中使用Module组件（直接贴代码了哈）

然后会在RealMadrid.vue得到这样的效果图。

这样我们就实现了在不同的vue中使用Module组件渲染出不同vue中的数据的效果。
最后我们就得到了两个由两种不同传参方式的组件所渲染出的父组件，如下：


使用此套组件，我们可以渲染出更多类似的父组件。