vue 官方文档 - 处理边界情况
发布日期:2022-02-17 02:39:49 浏览次数:30 分类:技术文章

本文共 1127 字,大约阅读时间需要 3 分钟。

1. 处理边界情况

1.1. 访问元素 & 组件

1.1.1. 访问根组件

所有子组件都可以通过 this.$root 访问 main.js 的那个根实例

⛔:大型应用建议使用 vuex 来管理!

1.1.2. 访问父组件

所有子组件可以通过 this.$parent 访问 上一级父组件,但是嵌套层级太深就会出现一个问题

1.1.3. 访问子组件实例或元素

可以通过给子组件设置一个 ref,来进行访问,比如可以在父组件写一个聚焦函数,让子组件里面的 input 进行聚焦

// Father.vuethis.$refs.baseInput.$refs.input.focus()

1.1.4. 依赖注入

父组件写 provide,后代子孙组件都使用 inject 来进行接收,和 react 的 context 差不多

⛔:由于这些属性是非响应式的,因此建议使用 vuex 来管理!

1.2. 程序化的事件监听器

我们知道,$emit 可以被 v-on(@) 进行侦听到,还有如下事件监听器,具体用法如下:

  • $on(eventName,eventHandler) 侦听某个事件
  • $once(eventName,eventHandler) 侦听一次某个事件
  • $off(eventName,eventHandler) 停止侦听某个事件

1.3. 循环引用

1.3.1. 递归组件

递归组件只能通过 name 来调用,有一个合适的场景就是 侧边栏无限递归

1.3.2. 组件直接的循环引用

官网的文件目录结构案例就会涉及到循环引用,解决办法有三:

  • 全局注册
  • beforeCreate
  • webpack 的异步 import

1.4. 模板定义的替代品

1.4.1. 内联模板

就是在 Father.vue 中指定模板内容,最终替换到 Son.vue 的 template 部分

⛔:作用域会难以理解,建议还是在 Son.vue 中定义好模板内容

1.4.2. X-Template

没研究哈

1.5. 控制更新

1.5.1. 强制更新

由于 vue2 的响应式原理使用的是 Object.defineProperty,因此数组和对象的响应式原理是有问题的,$forceUpdate可以手动强制更新

1.5.2. v-once

有些组件如果是大量的静态内容,可以给这个组件根元素添加一个 v-once

⛔:不要过度使用它,毕竟别人不熟悉 v-once 时候,还不晓得到底是啥原因导致它不更新

转载地址:https://blog.csdn.net/qq_39811414/article/details/117439177 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:vue-响应式原理
下一篇:C/C++整理

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年03月01日 12时11分47秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java键盘记录器_java键盘记录器 2019-04-21
iosalipay_【报Bug】ios支付宝支付调起支付闪退 2019-04-21
java getresources方法_java-如何正确使用ClassLoader.getResources()? 2019-04-21
java hostwrite_FileWriter只写第一行(启用了附加模式,Java) 2019-04-21
java jstl 获取字段_【java】 EL表达式截取字符串 2019-04-21
java线性表的实验心得_20162322 朱娅霖 实验报告一 线性表的应用,实现和分析 2019-04-21
java spring总结_关于Spring总结(必看篇) 2019-04-21
java中case后能有变量嘛_java – 为什么在case语句中变量不是本地的? 2019-04-21
python中dataset是什么意思_“ClassificationDataSet”中的“target”有什么用? 2019-04-21
java switch 变量_为什么不能在switch语句中声明变量? 2019-04-21
java基本的数据类型_JAVA基本数据类型简单介绍 2019-04-21
gcc4安装mysql_linux 安装mysql 2019-04-21
java 键值存储_java-键值存储为主数据库 2019-04-21
java小数是怎么运算的_JAVA中小数的运算 2019-04-21
java程序有多个类的如何运行_当多个Java程序在同一台机器上运行 2019-04-21
java thread.sleep 1000_有没有更好或替代的方法可以跳过/避免在Java中使用Thread.sleep(1000)?... 2019-04-21
java中的getnumber怎么用_Java中的Enum用法介绍 2019-04-21
java删不掉package_Python PIP 删除包Package 2019-04-21
中兴java翻盖_颠覆全面屏!中兴双屏折叠手机AXON M真机图赏:PC级体验 2019-04-21
java poi分批导入_Java批量爬取Excel数据,poi简易新手教程,3.9稳定版本 2019-04-21