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中使用css需要注意的地方小结
Sep 01 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
心扬JS分页函数代码
2010/09/10 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
DOM 高级编程
2015/05/06 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
简单了解python协程的相关知识
2019/08/31 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python绘制热力图示例
2019/09/27 Python
python 实现逻辑回归
2020/12/30 Python
大一自我鉴定范文
2013/12/27 职场文书
生产班组长岗位职责
2014/01/05 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
暑期实践个人总结
2015/03/06 职场文书
工作表现证明
2015/06/15 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
golang 实现并发求和
2021/05/08 Golang
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
MySQL详细讲解变量variables的用法
2022/06/21 MySQL