老师麻烦帮我详细讲解下 子组件向父组件通信 和父组件向子组件通信

来源:2-2 自由编程

111加油111

2020-02-25 15:55:51

子组件向父组件通信的两种方法

一传递属性

二绑定DOM事件

父组件向子组件通信

props接受属性   

我老是报错

最好帮我做几个实例讲解

写回答

1回答

好帮手慕夭夭

2020-02-25

同学你好,问题解答如下:

1.子组件向父组件传递的方式,是通过$emit传递的。具体如下:

Searchheader是中调用了SearchBox ,那么SearchBox是子组件 ,Searchheader是父组件。父组件中定义了一个自定义事件sy ,然后自定义事件执行的函数是sayhello。

http://img.mukewang.com/climg/5e54e184092bc9c609570708.jpg

子组件中假如有一个按钮绑定了点击事件,像通过这个事件,给父组件传递数据。那么要通过this.$emit触发父组件的自定义事件sy ,this.$emit第二个参数就是要传递给父组件的数据,父组件中的sayhello会接收这个数据 :

http://img.mukewang.com/climg/5e54e1ff0917870812840541.jpg

另外,子给父传递数据没有传递属性这个方法。

2.父组件给子组件传递数据,要通过props传递 。如下:

调用子组件时,传递过去一个username

http://img.mukewang.com/climg/5e54e35a09e7005f08590174.jpg

子组件中通过props接收 ,注意后面定义的是字符串类型,因为上面传递的是字符串:

http://img.mukewang.com/climg/5e54e3e209d89c0905870436.jpg

如果不需要指定类型,也可以写成如下形式:

http://img.mukewang.com/climg/5e54e44b09cde73c07800448.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 10739 问题

查看课程