this.$parent 訪問父實(shí)例

this.$children 當(dāng)前實(shí)例的直接子組件。(不保證順序,不是響應(yīng)式)

this.$parent.$parent.$refs.xxx 跨級(jí)訪問父組件

this.$children.$children.$refs.xxx 跨級(jí)訪問子組件

這種遞歸的方式 代碼繁瑣 性能低效

ref

只能獲取當(dāng)前組件上下文組件 無法跨層級(jí)

ref 是字符串 被用來給元素或子組件注冊(cè)引用信息。

引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

如果用在子組件上，引用就指向組件實(shí)例

<!-- vm.$refs.p/this.$refs.p 獲取DOM node --><p ref='p'>hello</p><!-- vm.$refs.child/this.$refs.child 獲取組件實(shí)例 --><child-component ref='child'></child-component>

注：

因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們,它們還不存在

$refs 不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

這僅作為一個(gè)用于直接操作子組件的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問 $refs。

當(dāng) ref 和 v-for 一起使用的時(shí)候，你得到的引用將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。

如何優(yōu)雅的獲取跨層級(jí)實(shí)例 ?

1、npm install vue-ref || yarn add vue-ref 安裝vue-ref插件

2、導(dǎo)入import ref from 'vue-ref'

3、使用插件Vue.use(ref, { name: 'ant-ref' });name是給插件起名

插件使用方法

//使用`provide` 在根組件提供數(shù)據(jù) provide() { return { //主動(dòng)通知 將組件實(shí)例綁定在根組件上 setChildrenRef: (name, ref) => { this[name] = ref; }, //主動(dòng)獲取 獲取綁定的組件 getChildrenRef: name => { return this[name]; }, // 獲取根組件 getRef: () => { return this; } }}// 使用`inject` 在子組件中注入數(shù)據(jù)inject: { setChildrenRef: { default: () => {} }, getParentRef: { from: 'getRef', default: () => {} }, getParentChildrenRef: { from: 'getChildrenRef', default: () => {} }}//使用指令注冊(cè)子組件<ChildrenH v-ant-ref='c => setChildrenRef(’childrenH’, c)' />//使用指令注冊(cè)DOM元素<h3 v-ant-ref='c => setChildrenRef(’childrenE’, c)'>E 結(jié)點(diǎn)</h3>

//獲取根組件實(shí)例 this.getParentRef()//獲取指定名稱組件實(shí)例this.getParentChildrenRef('childrenH')//這里輸出的事DOMthis.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) { //自定義指令傳入值 是函數(shù), 在這里執(zhí)行 傳入組件實(shí)例 binding.value(vnode.componentInstance || el, vnode.key); //vnode.key 是使用插件時(shí)起的名稱 }, 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); // 如果指令綁定的值有變化,則更新 組件實(shí)例 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); } }); }};

補(bǔ)充知識(shí)：vue項(xiàng)目中z-index不起作用（將vue實(shí)例掛在到window上面）

問題描述：由于原有項(xiàng)目（傳統(tǒng)項(xiàng)目）中嵌入新的vue組件，dialog彈出框的z-index：999999；任然不起作用；

解決辦法：將vue實(shí)例掛載到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不起作用，前面內(nèi)容只是鋪墊）

總結(jié)描述：由于項(xiàng)目版本的迭代，需要將新的項(xiàng)目（使用的vue框架）嵌入到原有的傳統(tǒng)的html文件項(xiàng)目中，控制臺(tái)提示找不到vue組件。除了正確引入vue實(shí)例外，需要查看NGINX配置是否正確

以上這篇Vue組件跨層級(jí)獲取組件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。