Vue组件跨层级获取组件操作

//使用`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")

"use strict";

Object.defineProperty(exports, "__esModule", {
 value: true
});
exports.default = {
 install: function install(Vue) {
  var options = arguments.length > 1 && arguments[1] !== undefined "color: #ff0000">补充知识：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文件）

将元素添加到body上面（解决z-index不起作用，前面内容只是铺垫）

总结描述：由于项目版本的迭代，需要将新的项目（使用的vue框架）嵌入到原有的传统的html文件项目中，控制台提示找不到vue组件。除了正确引入vue实例外，需要查看NGINX配置是否正确
以上这篇Vue组件跨层级获取组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。