Question

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

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

SearchComponent

<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

那是因为每次您使用Vue组件时，new instance of it is created

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

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

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

代替

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

根据您的情况将其定义为：

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

您还可以找到有关Component Reusing和Organizing Components的更多信息，并且 SearchComponent 和 PersonList 组件是 Peoples Component < / em>您还需要了解如何从Parent Component i.e Peoples to Child components

传递数据

Answer 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>

Answer 3

这些SearchComponent即使它们是相同的组成部分，也可以是不同的实例。他们每个人都有各自独立的数据。如果您希望两者都保持同步，建议您使用Vuex来建立一个全局存储，并将它们用作真理的来源。

Vue相同的组件输入不会更新

3 个答案: