vue中，组件间的传值（通信）方式——高频面试题

目录

父子组件通信

父：v-bind 绑定  子：props接收

直接在子组件通过 this.$parent.xxx

依赖注入：父 provide  子 inject 获取

子父组件通信

子组件通过自定义事件 this.$emit   父组件on监听事件

直接在父组件通过 this.$children.xxx

直接在父组件通过 this.$refs.xxx

slot插槽

跨组件通信

---

父子组件通信

优点：父组件可以直接向某个后代传递，无需一级一级传递

• 父：v-bind 绑定  子：props接收

缺点：子不能直接修改父组件的数据

• 直接在子组件通过 this.$parent.xxx

优点：子可以直接修改父组件的数据

• 依赖注入：父 provide  子 inject 获取

面试题扩展：子组件如何直接修改父组件中数据？

this.$parent.xxx

子父组件通信

• 子组件通过自定义事件 this.$emit   父组件on监听事件

• 直接在父组件通过 this.$children.xxx

• 直接在父组件通过 this.$refs.xxx

• slot插槽

https://blog.youkuaiyun.com/m0_66051368/article/details/123303004https://blog.youkuaiyun.com/m0_66051368/article/details/123303004

面试题扩展：父组件如何直接修改子组件中数据？

• 通过 this.$children.xxx
• 通过 this.$refs.xxx

跨组件通信

• this.$root