2

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

我的问题是，当导航中的 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>
4

3 回答 3

2

添加到@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>
于 2019-08-30T07:25:42.117 回答
2

那是因为每次使用 Vue 组件时，都会创建它的一个新实例

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

因此，如果您希望所有实例都作为单个组件受到影响，那么组件data不应被声明为函数，而应被声明为对象，即

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

代替

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

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

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

您还可以找到有关组件重用和组织组件的更多信息，并且由于SearchComponent和PersonList组件是Peoples 组件的子组件，您还需要了解如何将数据从 父组件（即 Peoples 传递给子组件）

于 2019-08-30T06:32:03.107 回答
0

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

于 2019-08-30T05:54:22.863 回答