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 相关文章推荐
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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实现的农历算法实例
2015/08/11 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
php经典趣味算法实例代码
2020/01/21 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
解析Vue.js中的组件
2018/02/02 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
在Python的Django框架中创建和使用模版
2015/07/15 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
电气工程自动化求职信
2014/03/14 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS