史上最详细的vue父子组件传参、传函数

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

子组件：自己写的组件，供其他页面调用

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

如果不够清晰，看图：

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

先上图

子组件：

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

2.定义属性：brainstormData，写上类型：Array

父组件：

1.引入、注册组件：

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

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

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

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

 

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

老规矩先上图：

子组件：

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

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

父组件：

1.省略引入组件

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

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

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