Vue面试题目-常用的API说明，Vue.set,Vue.delete,vm.$on,vm.$emit,自定义组件实现双向绑定

最新推荐文章于 2024-09-25 09:50:49 发布
最新推荐文章于 2024-09-25 09:50:49 发布
阅读量341 收藏
点赞数
分类专栏： 前端八股文 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/127328322
版权
本文详细解析Vue面试中常见的Vue.set用于向响应式对象添加属性并保持响应性，Vue.delete用于删除响应式对象属性。此外，通过示例介绍了组件间的事件通信，包括vm.$on和vm.$emit的使用，以及如何在自定义组件中实现双向绑定。重点讨论了在实际场景中如何应用这些API和技巧。
摘要由CSDN通过智能技术生成

16、常用API说明

16.1 Vue.set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且会触发视图更新。

使用方法：Vue.set(target,propertyName,value)

下面通过一个案例来演示一下,这个案例是在以前所做的用户列表的案例上进行修改的，

这里需求是给每个用户动态的添加身高。

<!DOCTYPE html>
<html lang=</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
专栏目录
订阅专栏
Vue源码阅读（23）：vm.$on、vm.$off、vm.$once、vm.$emit 源码解析
f18855666661的博客
08-27 1841
本想写 v-on 指令的源码解析，但是 v-on 指令的底层会使用到标题中的四个实例方法，所以，今天先把这四个与事件有关的实例方法讲清楚。 知识补充：上面说的实例是指 Vue 实例，在 Vue 应用中有两种类型的 Vue 实例，第一种是通过 new Vue({xxx}) 手动创建的 Vue 实例。第二种是组件 Vue 实例，当我们在模板中使用组件的时候，Vue 会为使用的每个组件创建对应的 Vue 实例。 先看下这四个方法是如何绑定到 Vue实例上的。 src/core/instance/ind.
vue中 关于$emit的用法
热门推荐
榴莲不好吃的专栏
11-21 80万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> &l............
Vue 中 组件通信 - 子传父（自定义事件）this.$emit方法
hswwqy的博客
06-10 3144
使用this.$emit方法向父组件传值
vue中的this.$emit方法：用于子组件中触发父组件方法并传值
飙歌的博客
02-22 4344
作用：用于子组件中触发父组件方法并传值。$emit update 和 .sync 修饰符 作用：.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
【Vue】自定义事件详解 | this.$emit的使用 | 其中参数传递的逻辑说明
weixin_44421143的博客
12-28 3627
文章目录自定义事件1、 使用背景13.2 示例 自定义事件 1、 使用背景 接着上一章讲的slot插槽的页面。 <body> <div id="app"> <todo> <todo-title slot="todo-title" :tit="title"></todo-title> <todo-items slot="todo-items" :itm="i" v-for="i in todoItems
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 9247
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 5344
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
Vue 自定义组件实现 v-model 的几种方式
最新发布
前端梦工厂
09-25 2536
在 Vue 中，v-model 是一个常用的指令，用于实现表单元素和组件之间的双向绑定。当我们使用原生的表单元素时，直接使用 v-model 是很方便的，但是对于自定义组件来说，要实现类似的双向绑定功能就需要一些额外的处理。本篇文章将介绍几种在自定义组件中实现 v-model 的方式，主要如下：使用v-model属性：适用于表单元素定义model属性：适用于非表单元素。
vue3中自定义$emit $on
ybweb的博客
09-07 1697
vue3 自定义$emit $on
Vue子组件递归导致this.$emit失效，父组件监听不到
qq_53121751的博客
10-27 2239
Vue子组件递归导致this.$emit失效，父组件监听不到
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
Vue.js提供了$on和$emit两个实例方法来实现父子组件间的自定义事件通信。然而，在某些情况下，父组件可能无法监听到子组件通过$emit发出的事件。这个问题的出现会影响组件间的正常通信，导致应用的某个功能无法按...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
Vue提供了多种方法实现组件间通信，其中Vue实例的事件总线（Event Bus）是一个轻量级事件通信机制，对于非父子关系的组件间通信尤为适用。然而，在实际开发过程中，可能会遇到使用bus.$emit触发事件时，第一次$on...
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别？.pdf
08-05
在 Vue.js 中，$emit 和 $on 方法是两个常用的方法，用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件，并在另一个组件中监听这个事件，从而实现组件间的数据传递和交互。 $emit 方法 $emit ...
royIdoodle#fe-interview-chaos#039.Vue中的父子通信使用$emit和$on是如何实现的1
07-25
Vue中的父子通信使用$emit和$on是如何实现的简易代码$on (trigger, callback) {if (typeof callback === '
前端八股文（3）53-84
VAN
09-12 1558
前端八股文
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
VAN
04-01 1348
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
javascript常见100问|前端基础知识|13-14-options 请求Restful-API-method前端知识体系14-总结，软技能是否看过红宝书code review CR 检查什么
VAN
04-01 1259
● GET 查询● POST 新增● PATCH 更新● DELETE 删除完善的知识范围，包含了前端工程师常用的所有知识点合理的结构化，便于理解和记忆本章讲解前端基础知识相关的面试题，包括 HTML CSS JS HTTP Ajax 等知识点。这都是技术一面时的必考知识点。不能只说不足，就截止了。一定要通过不足，来突出自己的解决方案，以及未来的预期。这样给人的印象是：正式了自己的不足 + 有学习的态度 —— 非常好！本章讲解软技能相关面试题。
javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点
VAN
04-01 1236
HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1233
前端学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值