vue 官方文档 - 处理边界情况
发布日期:2022-02-17 02:39:49
浏览次数:31
分类:技术文章
本文共 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
可以手动强制更新
userList: { { userList }}
1.5.2. v-once
有些组件如果是大量的静态内容,可以给这个组件根元素添加一个 v-once
⛔:不要过度使用它,毕竟别人不熟悉 v-once 时候,还不晓得到底是啥原因导致它不更新
转载地址:https://blog.csdn.net/qq_39811414/article/details/117439177 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月11日 14时58分28秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Spring Data Commons 远程命令执行漏洞(CVE-2018-1273)
2019-04-26
H2 Database Console 未授权访问
2019-04-26
Nginx 解析漏洞
2019-04-26
Nginx 配置错误导致漏洞
2019-04-26
Nginx越界读取缓存漏洞(CVE-2017-7529)
2019-04-26
Nginx 文件名逻辑漏洞(CVE-2013-4547)
2019-04-26
struts2远程代码执行漏洞合集
2019-04-26
JBoss 4.x JBossMQ JMS 反序列化漏洞(CVE-2017-7504)
2019-04-26
JBoss 5.x6.x 反序列化漏洞(CVE-2017-12149)
2019-04-26
ActiveMQ 反序列化漏洞(CVE-2015-5254)
2019-04-26
ActiveMQ任意文件写入漏洞(CVE-2016-3088)
2019-04-26
Apereo CAS 4.1 反序列化漏洞
2019-04-26
AppWeb认证绕过漏洞(CVE-2018-8715)
2019-04-26
Apache HTTPD 换行解析漏洞(CVE-2017-15715)
2019-04-26
Apache HTTPD 多后缀解析漏洞
2019-04-26
Apache SSI 远程命令执行漏洞
2019-04-26
Adobe ColdFusion 文件读取漏洞(CVE-2010-2861)
2019-04-26
Adobe ColdFusion 反序列化漏洞(CVE-2017-3066)
2019-04-26
Couchdb 垂直权限绕过漏洞(CVE-2017-12635)
2019-04-26