Vue 中怎样从插槽中发出数据
分类:互联网事 热度:

Vue 中怎样从插槽中发出数据

代码摆设后能够存在的BUG无法及时晓得,过后为了处理这些BUG,花了大量的工夫举行log 调试,这边趁便给人人举荐一个好用的BUG监控工具Fundebug。

咱们晓得利用作用域插槽能够将数据传送到插槽中,然而怎样从插槽传返来呢?

将一个办法传送到咱们的插槽中,而后在插槽中挪用该方式。我信无奈发出事宜,由于插槽与父组件同享不异的上下文(或作用域)。

在本文中,咱们将先容其事情道理,以及:

  • 从插槽到父级的 emit
  • 当一个槽与父组件同享作用域时意味着甚么
  • 从插槽到祖父组件的 emit
  • 更深刻地领会若何利用要领从插槽通信返来

从插槽到父级的 emit

而今看一下Parent组件的内容:

咱们在 Child 组件的插槽内有一个button 。单击该按钮时,咱们要在Parent 组件内部挪用一个办法。

若是 button 不在插槽中,而是直接在Parent组件的子组件中,则咱们能够拜候该组件上的要领:

当该 button 组件位于插槽内时,也是如斯:

之所以可行,是因为该插槽与 Parent 组件同享雷同的作用域。

插槽和模板作用域

模板作用域:模板内部的全部内容都能够会见组件上界说的全部内容。

这囊括一切元素,一切插槽和全部作用域插槽。

因而,不管该按钮在模板中位于那边,都能够拜候handleClick法子。

乍一看,这能够有点新鲜,这也是为什么插槽很难明白的缘由之一。插槽终究衬着为Child 组件的子组件,但它不与Child组件同享作用域。相反,它充任Parent 组件的子组件。

插槽向祖父组件发送数据

要是要从插槽把数据发送到祖父组件,通例的方法是利用的$emit方式:

由于该插槽与Parent 组件同享不异的模板作用域,以是在此处挪用$emit将从Parent 组件发出事务。

从插槽发还子组件

与Child 组件通信又若何呢?

咱们晓得若何将数据从子节点传送到槽中

以及怎样在作用域内的插槽中利用它:

除了传递数据,咱们还能够将法子通报到作用域插槽中。假如咱们以精确的体例连贯这些方式,则能够应用它来与Child组件通讯:

每当单击按钮时,就会挪用Child组件中的handleClick法子。

作者:Michael Thiessen 译者:前端小智 起源:medium原文:https:///questions/50942544/emit-event-from-content-in-slot-to-parent/50943093

Vue 中怎样从插槽中发出数据

【编辑举荐】

上一篇:5G为银行业转型进级赋能,5G时期银行该若何翻新 下一篇:2020 iPad 耐久度测试,仍旧易弯折
猜你喜欢
各种观点
热门排行
精彩图文