如何识别vue中的父子组件及理解父子组件通信

最近开始在学习vue的相关知识,简单记录下学习过程中的一些理解。

在看到组件这块有个父子组件传值的内容:

1.父组件可以使用 props 把数据传给子组件。

2.子组件可以使用 $emit 触发父组件的自定义事件。

没错,那么到底是如何通信呢,又是怎么界定父子组件的呢?

我们看下面的例子:


图1


图2

点击图1例子中的button:"点击此处将‘大连’发射给父组件",会去调用方法select,在select中我们会通过触发this.$emit调用父组件的showCityName这个事件,接着在图2中的showCityName又会去调用updateCity方法,方法中通过子组件的this.$emit的参数 data 将自己的toCity参数值改成了子组件传递过来的值。至此,子传父的结束!

那上面提到父组件可以使用 props 把数据传给子组件,此时的父组件中的senddata变成了‘大连’,那子组件中将会展示成:

父组件传给子组件的toCity:大连

界定父子组件?看过上面的例子其实已经很清楚了,父组件中的components{TrainCity} 已经明确的告诉了我们他的子组件就是TrainCity ,而TrainCity就是import TrainCity from "./train-city"
图1中的组件name:train-city,子父组件的关系也就清楚了。

在贴一个例子:

图3

如图,这代码里面谁是父组件,谁是子组件?
很简单可以这么理解:父组件是已被挂载的vue实例,而子组件,是被这个实例调用的自定义组件本身,而不仅仅是自定义标签或自定义组件中的模版标签。在这个例子中,父组件是var app1=new Vue({el: '#emitText'}), 而子组件是自定义的组件整体也就是components 里面的内容,它其实就是最外层div里面的内容。


记录学习的过程,写下自己的理解!
可能每个人的理解都不同,以后如果能看到更好的解释,也会记录下来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。