在 Vue 中,如何从插槽中发出数据
作者:Michael Thiessen 译者:前端小智 来源:medium
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文
GitHub
https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
代码部署后可能存在的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
组件共享相同的作用域。
插槽和模板作用域
模板作用域:模板内部的所有内容都可以访问组件上定义的所有内容。
这包括所有元素,所有插槽和所有作用域插槽。
因此,无论该按钮在模板中位于何处,都可以访问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
方法。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://stackoverflow.com/que...
交流
文章每周持续更新,可以微信搜索【大迁世界 】第一时间阅读,回复【福利】有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django入门:基于 Django 的 Web 页面开发
- 从零开始重新认识 Spring Framework
- 思科模拟器:高级交换实验
- ElasticSearch 基本的查询命令+集成 SpringBoot
- 数据库能力测试:SQL 语句改错
- IDEA 导入并运行 Eclipse 的 JavaWeb 项目
- 使用思科模拟器 Cisco Packet Tracer 模拟交换机基本配置
- IDEA 连接 SQL Sever
- Ms SQL Server 如何导入数据库
- 移动直播连麦PK快速调试
- Python:使用爬虫获取中国最好的大学排名数据(爬虫入门)
- Python:酒鬼漫步
- apache-commons-dbutils + Druid + JDBC 简单实现 CRUD
- Python:将一个 csv 文件转为 json 文件存储到磁盘
- TKE上搭建集群Dashboard