javascript - 如何在Vue js中访问子属性

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子级，以便我可以执行此操作？

最佳答案

您正在使用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>