Vue组件跨层级获取组件操作


Posted in Javascript onJuly 27, 2020

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文件)

Vue组件跨层级获取组件操作

将元素添加到body上面(解决z-index不起作用,前面内容只是铺垫)

Vue组件跨层级获取组件操作

总结描述:由于项目版本的迭代,需要将新的项目(使用的vue框架)嵌入到原有的传统的html文件项目中,控制台提示找不到vue组件。除了正确引入vue实例外,需要查看NGINX配置是否正确

以上这篇Vue组件跨层级获取组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 #Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 #Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 #Javascript
vue键盘事件点击事件加native操作
Jul 27 #Javascript
Element Cascader 级联选择器的使用示例
Jul 27 #Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 #Javascript
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python的时间模块datetime详解
2017/04/17 Python
Python虚拟环境项目实例
2017/11/20 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python用插值法绘制平滑曲线
2021/02/19 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python的常见矩阵运算(小结)
2019/08/07 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
python 实现端口扫描工具
2020/12/18 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
毕业生就业意向书
2014/04/01 职场文书
教职工代表大会主持词
2014/04/01 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
合伙购房协议样本
2014/10/06 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python