Vue 中插槽是怎么发出数据的

在工作中BUG的出现是在所难免的,但是在写代码的时候没法实时发现BUG,等事后再去解决BUG,还得花很多时间去进行log调试,这里给大家推荐一个不错的BUG监控工具:Fundebug

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

(推荐教程:Vue 1教程)

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

// 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 组件共享相同的作用域。

(推荐教程:Vue 2教程)

 

插槽和模板作用域

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

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

因此,无论该按钮在模板中位于何处,都可以访问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方法。

原创文章,作者:admin,如若转载,请注明出处:https://www.laofox.com/web/vue-tutorial/114.html

(0)
上一篇 2022年6月19日 下午9:38
下一篇 2022年6月19日 下午9:41

相关推荐

  • 学习Vue3.0,你需要先了解一下Proxy

    据悉Vue3.0的正式版将要在本月(8月)发布,从发布到正式投入到正式项目中,还需要一定的过渡期,但我们不能一直等到Vue3正式投入到项目中的时候才去学习,提前学习,让你更快一步掌...

    vue.js 2022年6月19日
    8600
  • Vue组件间的8种通讯方式

    前言 Vue 提供了各种各样的通讯,其中包括兄弟间的通讯和非兄弟间的通讯,借此机会做个总结,查阅起来方便。   1、props   目录结构   co...

    2022年6月19日
    12800
  • Vue 3 异步组件的重新“定义”

    首先我们来看一下有关于异步组件的变化:   新增了一个方法:defineAsyncComponent,用来显式地定义异步组件   component 选项改名:...

    vue.js 2022年6月19日
    8600

发表评论

您的电子邮箱地址不会被公开。