最近开始在学习vue的相关知识,简单记录下学习过程中的一些理解。
在看到组件这块有个父子组件传值的内容:
1.父组件可以使用 props 把数据传给子组件。
2.子组件可以使用 $emit 触发父组件的自定义事件。
没错,那么到底是如何通信呢,又是怎么界定父子组件的呢?
我们看下面的例子:
点击图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,子父组件的关系也就清楚了。
在贴一个例子:
如图,这代码里面谁是父组件,谁是子组件?
很简单可以这么理解:父组件是已被挂载的vue实例,而子组件,是被这个实例调用的自定义组件本身,而不仅仅是自定义标签或自定义组件中的模版标签。在这个例子中,父组件是var app1=new Vue({el: '#emitText'}), 而子组件是自定义的组件整体也就是components 里面的内容,它其实就是最外层div里面的内容。
记录学习的过程,写下自己的理解!
可能每个人的理解都不同,以后如果能看到更好的解释,也会记录下来。