首先要知道谁是父组件谁是子组件,这个概念分不清的话还这么传:

子组件:自己写的组件,供其他页面调用

父组件:自己写的组件被页面调用到了,页面内调用的组件就是父组件

如果不够清晰,看图:

一、父子组件传参数是通过属性props来实现的,需要在子组件内定义一个属性来接收父组件传过来的值;父组件要做的是双向绑定一个参数、给参数赋值。实例:

先上图

子组件:

1.要用brainstormData属性,此时属性是没有值的,父组件还没给它传值。

2.定义属性:brainstormData,写上类型:Array

父组件:

1.引入、注册组件:

2.为组件双向绑定属性,属性的值为一个参数,通过给参数赋值来实现为绑定的属性传值

3.在Data(){}中定义要用到的参数

4.为joinBrains赋值,值为从后端接收到的数据

到此父子组件传值的全部核心步骤就齐了。

 

二、父子组件传函数是通过$emit实现的,当子组件的方法需要在被引用后扩展的时候,$emit就发挥了作用。子组件需要用$emit来接收父组件传进来的方法,父组件要写具体的此方法步骤。实例(带参数:根据实际情况加参数):

老规矩先上图:

子组件:

1.点击触发goto方法,参数是父组件传过来的值

2.在methods里定义goto方法,方法内容是用$emit接收父组件传来的方法

父组件:

1.省略引入组件

2.@子组件的方法名,用来和子组件绑定,绑定的值为父组件中要具体去执行的方法的方法名

3.方法具体要做的是带着参数跳转页面

到此父子组件传函数的全部核心步骤就齐了。

Logo

前往低代码交流专区

更多推荐