vue框架組件id獲取

1、組件id

vue組件id是唯一的，並且是遞增的。

下面是vue框架源碼：

let uid = 0 export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this
    // a uid
    vm._uid = uid++ let startTag, endTag /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) { // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
 initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self
    vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props
 initState(vm) initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created') /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } }

當vue初始化時，會給每個組件初始化一個唯一的id。

即：vm._uid = uid++。

 

2、組件層級目錄獲取

從根節點（即掛載元素）一直到本組件id獲取。

let tree = this._uid ? this._uid : '' let parent = this.$parent ? this.$parent : ''
while (parent) { tree = parent._uid + '/' + tree parent = parent.$parent
} console.log(tree, '組件層級')

從獲取從根元素一直到本組件的所有id。

 

this. tree