Vue组件跨层级获取组件操作
this.$parent 访问父实例
this.$children 当前实例的直接子组件。(不保证顺序,不是响应式)
this.$parent.$parent.$refs.xxx 跨级访问父组件
this.$children.$children.$refs.xxx 跨级访问子组件
这种递归的方式 代码繁琐 性能低效
ref
只能获取当前组件上下文组件 无法跨层级
ref 是字符串 被用来给元素或子组件注册引用信息。
引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
如果用在子组件上,引用就指向组件实例
<!-- vm.$refs.p/this.$refs.p 获取DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child/this.$refs.child 获取组件实例 --> <child-component ref="child"></child-component>
注:
因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,它们还不存在
$refs 不是响应式的,因此你不应该试图用它在模板中做数据绑定。
这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
当 ref 和 v-for 一起使用的时候,你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
如何优雅的获取跨层级实例 ?
1、npm install vue-ref || yarn add vue-ref 安装vue-ref插件
2、导入import ref from "vue-ref"
3、使用插件Vue.use(ref, { name: "ant-ref" });name是给插件起名
插件使用方法
//使用`provide` 在根组件提供数据 provide() { return { //主动通知 将组件实例绑定在根组件上 setChildrenRef: (name, ref) => { this[name] = ref; }, //主动获取 获取绑定的组件 getChildrenRef: name => { return this[name]; }, // 获取根组件 getRef: () => { return this; } } } // 使用`inject` 在子组件中注入数据 inject: { setChildrenRef: { default: () => {} }, getParentRef: { from: "getRef", default: () => {} }, getParentChildrenRef: { from: "getChildrenRef", default: () => {} } } //使用指令注册子组件 <ChildrenH v-ant-ref="c => setChildrenRef('childrenH', c)" /> //使用指令注册DOM元素 <h3 v-ant-ref="c => setChildrenRef('childrenE', c)">E 结点</h3>
//获取根组件实例 this.getParentRef() //获取指定名称组件实例 this.getParentChildrenRef("childrenH") //这里输出的事DOM this.getParentChildrenRef("childrenE")
vue-ref插件源码
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = { install: function install(Vue) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var directiveName = options.name || 'ref'; console.log(arguments) Vue.directive(directiveName, { bind: function bind(el, binding, vnode) { //自定义指令传入值 是函数, 在这里执行 传入组件实例 binding.value(vnode.componentInstance || el, vnode.key); //vnode.key 是使用插件时起的名称 }, update: function update(el, binding, vnode, oldVnode) { if (oldVnode.data && oldVnode.data.directives) { var oldBinding = oldVnode.data.directives.find(function (directive) { var name = directive.name; return name === directiveName; }); if (oldBinding && oldBinding.value !== binding.value) { oldBinding && oldBinding.value(null, oldVnode.key); // 如果指令绑定的值有变化,则更新 组件实例 binding.value(vnode.componentInstance || el, vnode.key); return; } } // Should not have this situation if (vnode.componentInstance !== oldVnode.componentInstance || vnode.elm !== oldVnode.elm) { binding.value(vnode.componentInstance || el, vnode.key); } }, unbind: function unbind(el, binding, vnode) { binding.value(null, vnode.key); } }); } };
补充知识:vue项目中z-index不起作用(将vue实例挂在到window上面)
问题描述:由于原有项目(传统项目)中嵌入新的vue组件,dialog弹出框的z-index:999999;任然不起作用;
解决办法:将vue实例挂载到window
解决代码如下:
入口文件index.js中
import Index from './components/index.vue' import './index.pcss' function install (Vue) { Vue.component('gys-index-list', Index) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) }
在父组件中正确引入压缩后的css文件+js文件(这里截图的父组件是html文件)
将元素添加到body上面(解决z-index不起作用,前面内容只是铺垫)
总结描述:由于项目版本的迭代,需要将新的项目(使用的vue框架)嵌入到原有的传统的html文件项目中,控制台提示找不到vue组件。除了正确引入vue实例外,需要查看NGINX配置是否正确
以上这篇Vue组件跨层级获取组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25