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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
原生JS实现音乐播放器
Jan 26 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python K近邻算法的kd树实现
2018/09/06 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python如何安装下载后的模块
2020/07/03 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
模具专业毕业生自荐书范文
2014/02/19 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
物业保安岗位职责
2014/07/02 职场文书
优秀教师事迹材料
2014/12/15 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android