什么是VUE组件通讯

VUE组件通讯指的是在VUE组件之间进行数据或事件的传递。在实际开发中，组件通讯是非常重要的，因为一个页面可能会包含多个组件，这些组件之间需要相互协作才能完成整个页面的功能。

VUE组件通讯的场景有哪些

（1）父组件向子组件传递数据，比如商品列表组件向商品详情组件传递商品信息。

（2）子组件向父组件传递数据或事件，比如在评论组件中提交评论后，需要通知父组件更新评论列表。

（3）兄弟组件之间的通讯，比如在购物车组件中，购物车列表和结算组件之间需要相互通讯。

（4）跨级组件的通讯，比如在页面头部组件中，需要向页面底部组件传递一些信息。

VUE组件通讯的方式

（1）props和$emit

props是父组件向子组件传递数据的方式，可以通过在子组件中声明props来接收父组件传递的数据。

Refer to: Props | Vue.js (vuejs.org)

$emit是子组件向父组件传递数据或事件的方式，子组件可以通过$emit触发一个自定义事件，并向父组件传递数据。

Refer to: 组件实例 | Vue.js (vuejs.org)

父组件代码：

子组件的代码

在上面的代码中，父组件向子组件传递了一个name属性，子组件通过props接收了这个属性，并在模板中显示了出来。当用户点击“Change Name”按钮时，子组件触发了一个名为“changeName”的自定义事件，并向父组件传递了一个新的名字newName。父组件通过@changeName监听这个事件，并执行handleChangeName方法来更新页面上的名字。

（2）$parent和$children

$parent是子组件访问父组件的方法，$children是父组件访问子组件的方法。通过$parent和$children，我们可以访问到组件树中的任意一个组件。

Refer to: 组件实例 | Vue.js (vuejs.org)

父组件代码：

子组件代码

在上面的代码中，子组件通过$parent访问到了父组件，并调用了父组件中的handleChildClick方法。

（3）$refs

$refs是访问组件实例的方法，可以通过$refs来访问组件的属性和方法。

Refer to: 组件实例 | Vue.js (vuejs.org)

父组件代码：

子组件代码：

在上面的代码中，父组件通过ref属性给子组件起了一个名字“child”，并在handleClick方法中通过this.$refs.child访问到了子组件实例，并调用了子组件中的changeName方法。

总结

VUE组件通讯是非常重要的，通过不同的通讯方式可以实现组件之间的数据和事件传递。在实际开发中，我们需要根据不同的场景选择合适的通讯方式，以便更好地完成页面的功能。