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>

如何在Vue js中访问子属性

1 个答案: