Как получить доступ к детской собственности в Vue

Question

расслоение плотной topmenu/script.js

module.exports = { 
    components: { 
     'topmenuSearch': require('vue').extend(require('./topmenu-search/component.vue')) 
    } 
} 

/topmenu/template.html

<div class="search-overlay" v-if="topmenuSearch.searching"></div> 

/topmenu/topmenu-search/script.js

module.exports = { 
    data: function(){ 
     return { 
      results: [], 
      searchValue: '', 
      searching: false 
     } 
    } 
} 

В консоли я получаю

build.js:3008 [Vue warn]: Error when evaluating expression "topmenuSearch.searching": TypeError: Cannot read property 'searching' of undefined (found in component: <topmenu>) 

Как я могу получить доступ к ребенку topmenuSearch, чтобы я мог это сделать?

Answer 1

Вы используете Vueify? Я немного смущен тем, как вы организуете свои файлы здесь. https://github.com/vuejs/vueify

Что мы должны видеть, это ваши шаблоны. Похоже, у вас есть topmenu компонент и topmenu-search компонент, поэтому шаблон для topmenu должен выглядеть примерно так:

<template> 
    <div> 
    <topmenu-search></topmenu-search> 
    </div> 
</template> 

Просто потому, что вы объявляете компонент не означает, что она существует. Добавление его в шаблон создает элемент. Затем вы можете использовать v-ref для доступа к его данным внутри topmenu:

<topmenu-search v-ref:search></topmenu-search> 
<div class="search-overlay" v-if="$refs.search.searching"></div>