Vue.js 超出最大调用堆栈大小

Question

我正在按照本教程进行操作，但出于某种原因，我遇到了“最大调用堆栈错误”

<template>
  <SearchInput></SearchInput>
</template>

<script>

import SearchInput from './components/SearchInput.vue'
export default {
  name: 'App',
  components:{
    SearchInput
  }

};
</script>

SearchInput.vue 组件文件：

<template>
<SearchInput> 
    <input type="text">
</SearchInput>
</template>


<script>
export default {
    name: "SearchInput",
}
</script>

我尝试为 SearchInput 指定自己的名称“SearchInputView”：SearchInput，但没有成功。我使用的是 es6 语法，这是一个 Vue 2 项目。我做错了什么？

Answer 1

从组件本身移除 <SearchInput> 标签

您的 SearchInput 组件的模板应如下所示。

SearchInput.vue

<template> 
    <input type="text">
</template>

您将组件本身安装在自身内部，这导致了“最大调用堆栈错误”

Vue.js 超出最大调用堆栈大小

Vue.js maximum call stack size exceeded

vue.js

web

vuejs2

frontend

vue-component