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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
详解javascript遍历方式
2015/11/11 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python读取和保存图片5种方法对比
2018/09/12 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
普通院校学生的自荐信
2013/11/27 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2014年教师节寄语
2014/08/11 职场文书
工人先锋号申报材料
2014/12/29 职场文书
接待员岗位职责
2015/02/13 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers