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对象是否可用的最正确方法分析
Oct 03 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vue中本地静态图片路径写法
Mar 06 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue cli3适配所有端方案的实现
Apr 13 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往windows中添加用户
2006/12/06 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python对数组进行反转的方法
2015/05/20 Python
python实现数组插入新元素的方法
2015/05/22 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python使用OpenCV进行标定
2018/05/08 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
《春天来了》教学反思
2014/04/07 职场文书
小学三年级学生评语
2014/04/22 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
中秋节寄语2015
2015/03/24 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技