Vue中插槽发出数据的方法是什么
Vue中插槽发出数据的方法是什么
今天小编给大家分享一下Vue中插槽发出数据的方法是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
在工作中BUG的出现是在所难免的，但是在写代码的时候没法实时发现BUG，等事后再去解决BUG，还得花很多时间去进行log调试，这里给大家推荐一个不错的BUG监控工具：Fundebug。
将一个方法传递到我们的插槽中，然后在插槽中调用该方法。无法发出事件，因为插槽与父组件共享相同的上下文（或作用域）。
// 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`intoourslot--><slot:clicked="handleClick"/></div></template>
每当单击按钮时，就会调用Child组件中的handleClick方法。
以上就是“Vue中插槽发出数据的方法是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注恰卡编程网行业资讯频道。
