Vue.js 父子组件轻松理解子组件就能用上了通过事件传递数据子组件想告诉父组件发生了什么

Vue.js 父子组件通信，轻松理解！

一、通过props传递数据

父组件想给子组件传数据？用props就好！就像给子组件定了一个“必填”的属性，父组件填完，子组件就能用上了。

• 子组件声明props：

在子组件中，声明你希望接收的数据属性。

• 父组件传递数据：

在父组件中，使用子组件标签，并通过属性传递数据。

二、通过事件传递数据

子组件想告诉父组件发生了什么？发射（$emit）一个事件就好了，父组件监听到这个事件，就知道子组件的动态了。

• 子组件触发事件：

在子组件的合适位置，使用$emit方法发射自定义事件，并可以传递数据。

• 父组件监听事件：

在父组件中，用v-on监听子组件发射的事件，处理接收到的数据。

三、通过$parent和$children访问组件实例

想直接和另一个组件“聊天”？通过$parent和$children访问组件实例可以做到，但这个方法不太推荐，因为会增加组件间的耦合。

• 子组件访问父组件：

子组件可以通过$parent访问到父组件的实例。

• 父组件访问子组件：

父组件可以通过$children访问到所有子组件的实例。

四、通过provide和inject注入依赖

跨层级组件间的通信，用provide和inject最方便。就像在家族中，长辈给晚辈传家宝，祖先组件提供数据，后代组件就可以“继承”使用了。

• 祖先组件提供数据：

祖先组件使用provide方法提供数据。

• 后代组件注入数据：

后代组件使用inject方法注入祖先组件提供的数据。

Vue.js 提供了多种父子组件通信的方式，但最常用的是props和事件。$parent和$children虽然方便，但不建议滥用，保持组件独立和解耦更重要。复杂的项目可以考虑Vuex。

相关问答（FAQs）