Vue.js 将更改通知并行组件

我尝试将更改通知并行组件（使用v-for呈现）。 这是我的标记：

<div v-for="item in items" :key="item.ID">
    <my-component :item="item"></my-component> 
</div>

现在，例如，如果“my component”的第一个实例中的某些内容发生了更改，则应通知所有剩余的“my component”其更改。我怎样才能做到这一点

（目前我使用此。$root.$emit和此。$root.$on）

---

提前感谢您的帮助。

有几种方法可以实现这一点：

1.使用道具 VueJS的数据流模式建议向下传递道具，向上传递冒泡事件。您可以使用此模式，通过传递一个道具来通知子组件有关更改的信息

家长

<div v-for="item in items" :key="item.ID">
    <my-component :item="item" :last-modified="lastModified"></my-component> 
</div>

<div v-for="item in items" :key="item.ID">
    <my-component :item="item"></my-component> 
</div>

<template>
<div v-for="item in items" :key="item.ID">
    <my-component :item="item" :last-modified="lastModified" ref="childComponents"></my-component> 
</div>
</template>

<script>
export default {
  ...
  watch: {
    lastModified () {
      for (const child of this.$refs.childComponents) {
        child.onModified()
      }
    }
  }
}
</script>

<template>
<div v-for="item in items" :key="item.ID">
    <my-component :item="item"></my-component> 
</div>
</template>

<script>
import Bus from 'bus'

export default {
  ...
  watch: {
    lastModified () {
      Bus.$emit('modified')
    }
  }
}
</script>

儿童

<script>
export default {
  ...
  watch: {
    lastModified (v) {
      // Do something
    }
  }
}
</script>

<script>
import { mapGetters } from 'vuex'

export default {
  ...
  computed: {
    mapGetters([
      'lastModified'
    ]),
    ...
  },
  watch: {
    lastModified (v) {
      // Do something
    }
  }
}
</script>

export default {
  ...
  methods: {
    onModified () {
      // Do something
    }
  }
}

<script>
import Bus from 'bus'
export default {
  ...
  methods: {
    onModified () {
      // Do something
    }
  },
  beforeMount () {
    Bus.$on('modified', this.onModified)
  },
  beforeDestroy () {
    Bus.$off('modified', this.onModified)
  }
}
</script>

4.使用事件总线 这是实现事件传播的一种非常方便的方法，但事实并非如此。对于这种方法，我们将创建第三个组件，即用于事件的简单vue实例

总线.vue

import Vue from 'vue'
export default new Vue()

家长

<div v-for="item in items" :key="item.ID">
    <my-component :item="item" :last-modified="lastModified"></my-component> 
</div>

<div v-for="item in items" :key="item.ID">
    <my-component :item="item"></my-component> 
</div>

<template>
<div v-for="item in items" :key="item.ID">
    <my-component :item="item" :last-modified="lastModified" ref="childComponents"></my-component> 
</div>
</template>

<script>
export default {
  ...
  watch: {
    lastModified () {
      for (const child of this.$refs.childComponents) {
        child.onModified()
      }
    }
  }
}
</script>

<template>
<div v-for="item in items" :key="item.ID">
    <my-component :item="item"></my-component> 
</div>
</template>

<script>
import Bus from 'bus'

export default {
  ...
  watch: {
    lastModified () {
      Bus.$emit('modified')
    }
  }
}
</script>

从“总线”导入总线
导出默认值{
...
观察：{
最后修改（）{
总线$emit（'modified'）
}
}
}

儿童

<script>
export default {
  ...
  watch: {
    lastModified (v) {
      // Do something
    }
  }
}
</script>

<script>
import { mapGetters } from 'vuex'

export default {
  ...
  computed: {
    mapGetters([
      'lastModified'
    ]),
    ...
  },
  watch: {
    lastModified (v) {
      // Do something
    }
  }
}
</script>

export default {
  ...
  methods: {
    onModified () {
      // Do something
    }
  }
}

<script>
import Bus from 'bus'
export default {
  ...
  methods: {
    onModified () {
      // Do something
    }
  },
  beforeMount () {
    Bus.$on('modified', this.onModified)
  },
  beforeDestroy () {
    Bus.$off('modified', this.onModified)
  }
}
</script>

从“总线”导入总线
导出默认值{
...
方法：{
onModified（）{
//做点什么
}
},
安装前（）{
总线。$on（'modified'，this.onModified）
},
在销毁之前（）{
总线$off（'modified'，this.onModified）
}
}

非常感谢，这非常有帮助。我决定使用ref变量。