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

介绍：使用相同的两个组件，头部组件（Head.Component传参（父传子）。本文将使用一个团队球员阵容组件简单说明一下vue组件中传递的父子参数，本例中有一个header组件和一个teamlineuptemplate组件，根据不同球队的父组件的数据，会呈现出不同的内容，也就是说，每个球队（父组件）中显示的头信息（Head.vue）和阵容（Module.vue）的数据是不同的，这里我们将使用两种不同的父子传递参数的方法。一、头部组件1、首先编写创建头部组件Head.vue，并在Juve.vue和RealMadrid.vue中导入注册，上图中的Module组件为第二阵容组件，这里可以忽略。2.然后在pare中使用header组件nt组件Juve.vue，通过两个自定义属性将值和方法传给子组件。上面Head组件中的:tName和:tMet是自定义属性，分别给子组件传值和传方法。team传递的值来自于父组件的数据，方法Hola来自于父组件middle的方法。data(){return{team:{name:'尤文图斯',players:['C罗','莫拉塔','基耶萨','麦肯尼','阿图尔','拉姆塞','夸德拉多','德米拉尔','Dericht','Danilo','Szczesny'],img:require("../assets/juve.webp")},ModeVer:''}},方法:{Hola(){console.log(this.team.name+'必须赢');}}3。返回子组件Head.vue以使用props数组保存来自父组件的值和方法。props:['tName','tMet']props数组中的'tName'和'tMet'分别对应父组件Juve.vue中的值team和方法Hola，接收到team和Hola方法后，我们可以在子组件中使用它们。4.所以下一步我们要在子组件中渲染Head上的队伍，实现一个点击队名打印队伍胜利的小功能（这里的function函数来自于父组件，也就是Hola）.以上代码可以看出点击事件tMet是绑定在h1标签上的，子组件的tMet是父组件传过来的Hola方法。因此，单击团队名称将向控制台打印“Thisteammustwin”。上图是渲染效果，下图是点击事件触发tMet（这里的tMet是父组件中的Hola方法）5、接下来用同样的方法将RealMadrid.vue的数据和方法调用到其Head组件（操作相同，只是里面的Hola方法不同，点击后弹窗提示“球队必须赢”）data(){return{team:{name:'RealMadrid',球员：['阿扎尔','本泽马','维尼修斯','克洛泽','卡塞米罗','巴尔韦德','马塞洛','瓦拉内','拉莫斯','卡瓦哈霍拉','库尔图瓦'],img:require('../assets/rmd.png')}}},方法：{Hola(){alert(this.team.name+'mustwin');}}渲染效果和点击事件如下：2.Lineup组件。在编写头部阵容组件时，我们改变了v-bind参数的传递方式。首先在components文件夹下创建阵容模板Module.vue，命名为Modulename:'Module'。编写阵容模板的样式2.创建两个父组件Juve.vue和RealMadrid.vue，引入子组件Module并注册到这里。需要使用v-bind将team对象传递给子组件，其中v-bind:后面的value是子组件接收到的参数名。3.回到子组件模块去receivedataexportdefault{props:{team:{type:Object}}}在子组件的props中接收parent组件发送的参数team是要接收的参数名，跟后面的值一致通过v-bind:在父组件中，type是接收参数的类型，因为父组件发送的team是对象的形式，所以thisAttype:Object，此时，Module子组件已从juve.vue父组件接收到参数。4.将接收到的数据渲染到子组件中的Module在Juve.vue中得到的效果图是这样的：5.同样的操作使用RealMadrid.vue中的Module组件（直接粘贴代码）然后会在RealMadrid.vue中得到这样的渲染图。这样我们就实现了在不同vue中使用Module组件渲染不同vue中数据的效果。最终我们得到了两种不同参数传递方式的组件渲染的两个父组件，如下：使用这组组件，我们可以渲染出更多相似的父组件。