当前位置: 首页 > 网络应用技术

vue $ attrs和$听众的详细使用

时间:2023-03-07 16:39:03 网络应用技术

  首先,让我们看一下这张图片,该图片显示一个多级相关的组件嵌套

  让我们首先考虑一下情况,如何与组件A和组件C进行通信C。我们可以拥有多少个解决方案?

  在许多开发中,我们只想将组件A的数据传递到组件C。如果您使用道具来传达组件通信,尽管可以实现它,但是代码可读性并不强大且难以维护。

  因此,此时,我们的主角将出现

  在VUE2.4中,为了解决需求,引入了和平,并添加了选项。在默认情况下,在2.4版2.4版本中,父母范围的属性属性不被确认为Props Century Century Loneliness的财产属性,它将被“退款”,并用作普通的HTML特征,以应用于子组件的根元素。如下所示

  父组件的代码:

  子组件的代码:

  让我们看看控制台首先打印的DOM结构:这是:

  新选项在2.4中添加,默认值为真,并且值的值设置为false。这些默认行为将被禁止。但是,通过实例属性,这些特征可以生效,并且可以将其绑定到子组件的非根源元素中。

  修改子组件的代码:

  然后添加一个孙子组件

  页面显示如下:

  从上面的代码可以看出,属性可以使用简单的代码将组件A的数据传递到组件C。场景的范围很宽。

  让我们看一下组件C如何传递到组件A?

  VUE2.4版本添加了属性。我们在组件B上绑定,在组件A中,由聆听组件触发的事件C.您可以将组件C发送的数据传递给组件A。

  修改父组件的代码:

  亚辅助代码:

  太阳组件代码:

  操作结果:

  现在我们应该很清楚。