Мне нужно сделать некоторые вещи в ready:
корневого экземпляра только тогда, когда некоторые компоненты не существуют (они не были объявлены в HTML).
Как проверить, существует ли компонент?
Мне нужно сделать некоторые вещи в ready:
корневого экземпляра только тогда, когда некоторые компоненты не существуют (они не были объявлены в HTML).
Как проверить, существует ли компонент?
Я действительно надеюсь, что есть лучший ответ, чем этот, но на данный момент это решает проблему.
В готовом я обращаюсь к элементам children через this
(также может быть Vue
) и проверять, есть ли их имя или нет, что я ожидал:
ready: function() {
for (var i = 0; i < this.$children.length; i++) {
if (
this.$children[i].$options.name == 'my_component_a'
|| this.$children[i].$options.name == 'my_component_b'
|| this.$children[i].$options.name == 'my_component_c'
) {
//do stuff
}
}
}
Вы также можете получить к ним доступ напрямую, если ранее назначили им ссылку в своем шаблоне: // шаблон:
<comp v-ref:my_component_ref></comp>
Затем из готового компонента Vue:
if (this.$refs.my_component_ref){
//do stuff
}
Мы можем получить список загруженных (глобальных и/или локальных) компонентов экземпляра Vue из опций создания экземпляров, которые доступны через vm.$options
, где vm
- текущий экземпляр Vue.
vm.$options
свойство содержит все опции экземпляра Vue. Например, vm.$options.components
возвращает объект, содержащий загруженные компоненты текущего Vue instace vm
.
Однако в зависимости от способа регистрации компонента глобально через Vue.component()
или локально внутри опций экземпляра Vue, структура vm.$options.components
будет отличаться.
Если компонент зарегистрирован глобально, компонент будет добавлен в ссылку vm.$options.components
[[Prototype]] или его __proto__
.
И если компонент зарегистрирован локально внутри опций экземпляра Vue, компонент будет добавлен к объекту vm.$options.components
непосредственно как его собственное свойство. Так что нам не нужно прокладывать прото-цепочку, чтобы найти компонент.
В следующем примере мы увидим, как получить доступ к загруженным компонентам в обеих ситуациях.
Обратите внимание на комментарии // [1]
и // [2]
в коде, которые связаны с локальными зарегистрированными компонентами.
// the globally registered component
Vue.component('global-child', {
template: '<h2>A message from the global component</h2>'
});
var localComponent = Vue.extend({ template: '<h2>A message from the local component</h2>' });
// the root view model
new Vue({
el: 'body',
data: {
allComponents: [],
localComponents: [],
globalComponentIsLoaded: false
},
// local registered components
components: { // [1]
'local-child': localComponent
},
ready: function() {
this.localComponents = Object.keys(this.$options.components); // [2]
this.allComponents = loadedComponents.call(this);
this.globalComponentIsLoaded = componentExists.call(this, 'global-child');
}
});
function loadedComponents() {
var loaded = [];
var components = this.$options.components;
for (var key in components) {
loaded.push(key);
}
return loaded;
}
function componentExists(component) {
var components = loadedComponents.call(this);
if (components.indexOf(component) !== -1) {
return true;
}
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
<h1>A message from the root Vue instance</h1>
<p>All loaded components are: {{ allComponents | json }}</p>
<p>local components are: {{ localComponents | json }}</p>
<p><code><global-child></code> component is loaded: <strong>{{ globalComponentIsLoaded }}</strong></p>
<global-child></global-child>
<local-child></local-child>
Я не уверен, если вам нужен динамический метод, но это может помочь определить, существует ли компонент:
Vue.options.components['CompOne']
найденный:
var isComponentExists = "component-name" in Vue.options.components
получить текущий компонент импортированных компонентов
this.$options.components[findComponentName]
получить глобальные компоненты
Vue.$options.components[findComponentName]
Чтобы проверить, существует ли глобальный компонент:
let componentExists = 'componentName' in Vue.options.components
Чтобы проверить, существует ли импортированный компонент в компоненте:
let componentExists = 'componentName' in this.$options.components