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

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文件)

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

总结描述:由于项目版本的迭代,需要将新的项目(使用的vue框架)嵌入到原有的传统的html文件项目中,控制台提示找不到vue组件。除了正确引入vue实例外,需要查看NGINX配置是否正确

以上这篇Vue组件跨层级获取组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

  • Vue.js组件高级特性实例详解

    本文实例讲述了Vue.js组件高级特性.分享给大家供大家参考,具体如下: 1 递归 为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己. html: <div id="app"> <deniro-component :count="1"></deniro-component> </div> js: Vue.component('deniro-component',{ name:'deniro-comp

  • 基于Vue的侧边目录组件的实现

    最近要做一个侧边目录的功能,没有找到类似的组件,索性自己写了一个供大家参考 vue-side-catalog 一个基于vue的侧边目录组件. 源码地址:https://github.com/yaowei9363/vue-side-catalog 安装 npm install vue-side-catalog -S 开始 <template> <div id="app"> <div class="demo"> <h1>J

  • vuejs使用递归组件实现树形目录的方法

    上篇文章我提到了通讯录的开发,里面的目录使用了vue的递归组件实现的树形目录,这篇文章就来讲讲如何实现树形目录吧! 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这里涉及到java的构造多叉树的知识,后续我会另外写一篇文章详细讲解,这里讲下前端. 数据可以先构造json使用,这里用到的格式大概如下,以childList来嵌套子菜单: { id:YH, name:银行, pid:0, childList:[{ id:YH******,

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

    this.$parent 访问父实例 this.$children 当前实例的直接子组件.(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给元素或子组件注册引用信息. 引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使

  • Vue使用Ref跨层级获取组件的步骤

    Vue使用Ref跨层级获取组件实例 示例介绍 在开发过程中,我们难免会使用到跨层级的ref实例获取,大部分情况下,我们都可以通过组件自身的parent或者children去找到需要的实例.但是当层级不明显或者太深的时候,用此方法难免过于臃肿和低效率. 如下图所示,我们通过组件E去获取组件D的组件实例. 文档目录结构 分别有A.B.C.D.E和index六个组件,并按照上图的组件顺序,分别插入到各自的页面中. 页面样式如下: 安装vue-ref 下载vue-ref npm install vue-

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • Vue如何跨组件传递Slot的实现

    在开发过程中遇到这样一个问题,如何跨组件传递插槽.因为在开发类似树组件的过程中,插槽需要通过外部传递到树的根节点,然后通过根节点依次传递到各个叶子节点.那么如何把根节点的Slot如传递给子组件呢? 我们在开发过程中,希望可以这样实现重新定义叶子节点的结构: <data-tree> <template v-slot:node="data"> <div>{{data.title}} - {{data.text}}</div> </tem

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • 在Vue中获取组件声明时的name属性方法

    在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err

  • vue学习笔记之给组件绑定原生事件操作示例

    本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发

  • Vue element-ui父组件控制子组件的表单校验操作

    方法一: 父组件代码: <template> <div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保 存</el-button> </div> </template> <

  • 在vue中使用防抖函数组件操作

    初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i

  • vue 子组件修改data或调用操作

    <子组件 ref='xxx'></子组件> 父组件: this.refs.xxx.子组件定义的方法() 外部: vm.$refs.xxx.子组件定义的方法() 注意:子组件添加 ref 属性,父组件才可以通过 refs 获取. 补充知识:vue更新data值,如何重新渲染组件? 一:先介绍一下Vue.set()方法 注:如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况. 官网API是这样介绍的: Vue.set(targe

随机推荐