最近开始在学习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里面的内容。
记录学习的过程，写下自己的理解！可能每个人的理解都不同，以后如果能看到更好的解释，也会记录下来。
网友评论