如何訪問屬性child Vue公司JS

Question

頂部菜單/的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>