如何在 Vue js 中访问子属性答案

【问题标题】：How to access child property in Vue js如何在 Vue js 中访问子属性
【发布时间】：2016-04-21 10:07:57
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：