Vue相同的组件输入不更新

Question

我在导航菜单和人物页面重复使用了相同的组件

我的问题是，当导航中的 SearchComponent 输入更新其值时，人民页面 SearchComponent 输入不会更新其值，反之亦然。我应该如何在 Vue JS 中做到/实现这一点。以下是我的代码

搜索组件

<template>
  <div class="search">
     <input type="text" v-model="name">
     <input type="text" v-model="email">
     <input type="text" v-model="age">
  </div>
</template>
<script>
export default {
    name: 'SearchComponent',
  data() {
    return {
      name: '',
      email: '',
      age: ''
    }
  }
}
</script>

导航

<template>
  <div class="nav">
    <ul>
      <li>Home</li>
      <li>Contact</li>
      <li>About</li>
    </ul>
    <SearchComponent />
  </div>
</template>
<script>
import SearchComponent from './SearchComponent'
export default {
    name: 'NavComponent',
  data() {
    return {
      name: '',
      email: '',
      age: ''
    }
  },
  components: {SearchComponent}
}
</script>

人物页面

<template>
  <div class="persons">
    <SearchComponent />
    <PersonList />
  </div>
</template>
<script>
import SearchComponent from './SearchComponent'
import PersonList from './PersonList'
export default {
    name: 'PersonsPage',
  data() {
    return {
      name: '',
      email: '',
      age: ''
    }
  },
  components: {SearchComponent, PersonList}
}
</script>

Answer 1

添加到@Eli，尝试这种方式为所有实例的数据共享相同的对象引用：

<template>
  <div class="persons">
    <SearchComponent />
    <PersonList />
  </div>
</template>
<script>
import SearchComponent from './SearchComponent'
import PersonList from './PersonList'
const personPageData = {
      name: '',
      email: '',
      age: ''
    };
export default {
    name: 'PersonsPage',
  data() {
    return personPageData; //Same state object referred by all instances.
  },
  components: {SearchComponent, PersonList}
}
</script>

Answer 2

那是因为每次你使用一个 Vue 组件，一个new instance of it is created

由于组件是可重用的 Vue 实例，它们接受与新 Vue 相同的选项，例如 data、computed、watch、methods 和生命周期挂钩。唯一的例外是一些特定于根的选项，例如 el。

因此，如果您希望所有 Instance 作为单个组件受到影响，则组件的 data 不应声明为函数，而应声明为对象，即

data: {
  name: '',
  email: '',
  age: ''
}

代替

data: function () {
  return {
   name: '',
  email: '',
  age: ''
  }
}

在您的情况下，您将其定义为：

data() {
return { 
   name: '',
   email: '',
   age: ''
 }
}

您还可以找到有关 Component Reusing 和 Organizing Components 的更多信息，并且由于 SearchComponent 和 PersonList 组件是 Peoples 组件 的子组件还需要知道如何从Parent Component i.e Peoples to Child components传递数据

Answer 3

那些SearchComponent即使是同一个组件，也是不同的实例。他们每个人都有自己独立的数据。如果您希望两者保持同步，我建议您使用 Vuex 来拥有一个可以用作事实来源的全球商店。