Vue父子组件之间的传值及父子组件之间相互调用属性或方法

目录

一、父子组建之间的传值

1.1 父组件向子组件传值

1.2 子组件向父组件传值

二、父子组件之间相互调用属性或方法　

2.1 父组件调用子组件的属性或方法

2.2 子组件调用父组件的属性或方法

三、总结

3.1 父子组件之间传值

3.2 主动调用子组件或主动调用父组件的属性或方法

---

一、父子组建之间的传值

1.1 父组件向子组件传值

父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。

1. 在父组件中引入子组件；

2. 并在components中注册子组件；

3. 通过属性向子组件中传值。

4. 在子组件中通过props属性接收父组件串过来的数据

注：以上所写的步骤是方便自己的记忆，实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。

1.2 子组件向父组件传值

子组件向父组件传值是通过自定义事件的方式向父组件传值，为方便理解记忆，可按以下步骤：

1. 在子组件中通过子组件的$emit方法自定义事件向父组件传数据

2. 父组件通过监听子组件自定义的事件获取子组件传的值

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

这样我们就基本实现了子组件向父组件发送值了。

OK，这样不好记忆，我打个比方，

父向子传值：

父向子传值，可以比喻父亲给儿子说媒：

1. 父亲先物色菇凉；（引入子组件）
2. 然后将菇凉信息记录下来（components中注册子组件）
3. 将菇凉信息发给儿子。（属性向子组件中传值） 儿子这边： 通过props属性(可以理解为接收到短信)，收到父亲发来的信息。 然后就交往了。

子向父传值：

子向父传值，可以比喻儿子自由恋爱：

1. 儿子有出息，媳妇自己搞定，写email告诉父亲好消息（子组件的$emit方法自定义事件向父组件传数据）
2. 父亲收到信，拆开信得到儿子的好消息（父组件通过监听子组件自定义的事件获取子组件传的值）

二、父子组件之间相互调用属性或方法　

2.1 父组件调用子组件的属性或方法

父组件在使用子组件时可以通过Vue的ref属性获取到子组件对象，从而调用子组件的属性或方法，如下：

父组件：

子组件：

2.2 子组件调用父组件的属性或方法

子组件调用父组件的方法或属性可以直接通过子组件对象的$parent属性获取父组件对象，从而调用父组件的属性或方法。如下：

子组件：

父组件：

OK，这样不好记忆，我打个比方，

父调子组件

简单记一句: 不养儿不知父母恩($refs)

子调父组件

简单记一句：我爸是李刚($parent )

三、总结

3.1 父子组件之间传值

• 父组件向子组件传值：通过属性传入，子组件通过props定义与传入属性相同的变量接收；
• 子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值；

3.2 主动调用子组件或主动调用父组件的属性或方法

• 父组件主动调用子组件的属性或方法：通过父组件的$refs.子组件的ref属性值 来获取子组件对象，从而调用子组件的属性或方法；
• 子组件主动调用父组件的属性或方法：通过子组件的$parent 获取父组件对象，从而调用父组件的属性或方法