Vue中的父子/爷孙传值

195 阅读1分钟

第一种

使用常规的v-bind方法绑定父亲的data,传到儿子的props中

image.png

image.png

image.png

image.png

儿子要改父亲的值,只需要绑定一个click事件,通过$emit('xxx')传送一个方法给父亲,父亲通过 @xxx="xxxx"即刻修改data数据

image.png

image.png

第二种

通过parent/parent/children 可以直接在儿子/父亲中获得对方的数据和方法

image.png

image.png

第三种

通过provide和inject可以实现父亲给儿子组件/孙子组件传值

image.png

image.png

image.png