在Vue中,如何从插槽中发出数据

更新日期: 2020-07-16阅读: 1.7k标签: 插槽

我们知道使用作用域插槽可以将数据传递到插槽中,但是如何从插槽传回来呢?

将一个方法传递到我们的插槽中,然后在插槽中调用该方法。 我信无法发出事件,因为插槽与父组件共享相同的上下文(或作用域)。

// Parent.vue
<template>
  <Child>
    <template #default="{ clicked }">
      <button @click="clicked">
        Click this button
      </button>
    </template>
  </Child>
</template>
// Child.vue
<template>
  <div>
    <!-- 将“handleClick” 作为 “clicked” 传递到我们的 slot -->
    <slot :clicked="handleClick" />
  </div>
</template>

在本文中,我们将介绍其工作原理,以及:

  • 从插槽到父级的 emit
  • 当一个槽与父组件共享作用域时意味着什么
  • 从插槽到祖父组件的 emit
  • 更深入地了解如何使用方法从插槽通讯回来

从插槽到父级的 emit

现在看一下Parent组件的内容:

// Parent.vue
<template>
  <Child>
    <button @click="">
      Click this button
    </button>
  </Child>
</template>

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

如果 button 不在插槽中,而是直接在Parent组件的子组件中,则我们可以访问该组件上的方法:

// Parent.vue
<template>
  <button @click="handleClick">
    Click this button
  </button>
</template>

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

/ Parent.vue
<template>
  <Child>
    <button @click="handleClick">
      Click this button
    </button>
  </Child>
</template>

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


插槽和模板作用域

模板作用域:模板内部的所有内容都可以访问组件上定义的所有内容。

这包括所有元素,所有插槽和所有作用域插槽。

因此,无论该按钮在模板中位于何处,都可以访问handleClick方法。

乍一看,这可能有点奇怪,这也是为什么插槽很难理解的原因之一。插槽最终渲染为Child 组件的子组件,但它不与Child 组件共享作用域。相反,它充当Parent 组件的子组件。


插槽向祖父组件发送数据

如果要从插槽把数据发送到祖父组件,常规的方式是使用的$emit方法:

// Parent.vue
<template>
  <Child>
    <button @click="$emit('click')">
      Click this button
    </button>
  </Child>
</template>

因为该插槽与Parent 组件共享相同的模板作用域,所以在此处调用$emit将从Parent 组件发出事件。


从插槽发回子组件

与Child 组件通讯又如何呢?

我们知道如何将数据从子节点传递到槽中

// Child.vue
<template>
  <div>
    <slot :data="data" />
  </div>
</template>

以及如何在作用域内的插槽中使用它:

// Parent.vue
<template>
  <Child>
    <template #default="{ data }">
      {{ data }}
    </template>
  </Child>
</template>

除了传递数据,我们还可以将方法传递到作用域插槽中。 如果我们以正确的方式连接这些方法,则可以使用它来与Child组件通信:

// Parent.vue
<template>
  <Child>
    <template #default="{ clicked }">
      <button @click="clicked">
        Click this button
      </button>
    </template>
  </Child>
</template>
// Child.vue
<template>
  <div>
    <!-- Pass `handleClick` as `clicked` into our slot -->
    <slot :clicked="handleClick" />
  </div>
</template>

每当单击按钮时,就会调用Child组件中的handleClick方法

原文:https://stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093


链接: https://www.fly63.com/article/detial/9568

Vue 技能进阶:使用设计模式写出优雅的前端代码

本文针对 Vue 中如何控制组件子树之外的东西,探讨了四种解决方案,并展示了每种解决方案的优缺点。希望读者能从中受到启发。问你个问题,以前你可能从来没想过:有没有办法从子组件填充父组件插槽?

vue插槽slot和slot-scope

插槽我对他的理解就是父组件的东西插到子组件的<slot></slot>里面,也不知道这样理解对不对,方便自己记忆;作用域插槽我对他的理解就是数据在子组件里面,父组件可以用

一个案例搞懂 Vue.js 的作用域插槽

作用域插槽是 Vue.js 中一个很有用的特性,可以显著提高组件的通用性和可复用性。问题在于,它实在不太好理解。尝试搞清楚父子作用域之间错综复杂的关系,其痛苦程度不亚于求解一个棘手的数学方程。

Vue.js 中的无渲染行为插槽

在本文中我们讨论 Vue 中的无渲染插槽模式能够帮助解决哪些问题。在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。

vue具名插槽、作用域插槽的新写法

有时让插槽内容能够访问子组件中才有的数据是很有用的。但是由于子组件的作用域在子组件,而父组件的作用域在父组件,这样一来,父组件就访问不到子组件的信息了,但是我们又不想用$emit发送事件去传递信息

深入了解Vue.js的作用域插槽

作用域槽是Vue.js的一个有用特性,它可以使组件更加通用和可重用。唯一的问题是它们很难理解!试着让你的头在父母和孩子的范围内交织,就像解决一个棘手的数学方程。

Vue 2.60 中, 插槽新增的v-slot

注意v-slot只能添加在<template>上(只有一种例外情况),这一点和已经废弃的slotattribute不同。有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的<current-user>组件:

如何通过带有Vue插槽的组件传递HTML内容

这篇文章将向您介绍如何使用Vue插槽在Vue.js中将数据从父组件传递到子组件。这篇文章适合所有阶段的开发人员(包括初学者)。

如何使用Vue中的嵌套插槽(包括作用域插槽)

最近我弄清楚了如何递归地实现嵌套插槽,包括如何使用作用域插槽来实现。起因是我想看看是否可以构建一个复制v-for指令但仅使用template组件。

vue中插槽slot的使用

官方解释:Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。插槽就是子组件中的提供给父组件使用的一个占位符

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!