呈现中出错：“TypeError:无法读取未定义的属性'length'”

Question

我试图只显示一个覆盖，如果我的搜索输入包含任何文本。

这是我的模板，其中我的输入字段是：

Input.vue：

<template>
    <div>
        <input v-model="query" class="input" placeholder="Global search..."></input>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                query: '',
            };
        }
    };
</script>

当我在控制台中进行检查时，query会更新我在输入字段中写入的任何文本。

然后，我尝试将此变量传递给另一个组件，该组件保存我的overlay div：

Overlay.vue：

<template>
    <div v-if="this.$root.query.length > 0">
        <div class="search-overlay is-active"></div>
    </div>
</template>

然而，这给我下面的错误：

[Vue warn]：呈现错误：“TypeError:无法读取未定义的属性'length'”

我到底做错了什么？

Answer 1

您永远不应该像这样访问组件数据。那是个坏方法。您应该看看VueX和状态管理模式，因为这里有一个典型的案例。

• https://vuex.vuejs.org/

但是，如果不想使用VueX（或用于状态管理模式的其他工具），则应使用如下事件：

var Input = Vue.component('custom-input', {
  name : "custom-input",
  template : "#custom-input-template",
  props : ["value"],
  methods : {
    onInput(){    
      this.$emit('input', this.$refs.queryInput.value)
    }
  },
  created() {
    console.log("Custom-input created")
  }
});

var Overlay = Vue.component('custom-overlay', {
  name : "custom-overlay",
  template : "#custom-overlay-template",
  props : ["query"],
  created() {
    console.log("Custom-overlay created")
  }
});

new Vue({
    el: "#app",
    components : {
      Input,
      Overlay
    },
    data: {
		  query : null
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
	<div>		
		 <custom-input v-model="query"></custom-input>
		 <custom-overlay v-show="query && query.length > 0" :query="query"></custom-overlay>
	</div>
</div>


<script type="text/x-template" id="custom-input-template">
    <div>
        <input :value="value" ref="queryInput" class="input" placeholder="Global search..." @input="onInput"></input>
    </div>
</script>

<script type="text/x-template" id="custom-overlay-template">
  <div>
	  {{query}}
  </div>
</script>

Answer 2

$root是树中最顶层的组件（您用new Vue（）实例化的组件），我认为它不是Input.Vue。

在任何情况下，如果Input.vue是根组件，那么以您的身份访问组件的状态都是混乱的。如果你想跨组件共享数据，你应该通过props（从父级到子级的数据流）来实现，或者对于更复杂的情况，你可能需要一个共享的数据存储（例如：Vuex）。