将数据传递给动态创建的兄弟姐妹

Question

我正在努力寻找我认为是一个简单问题的答案，但没有成功。我是 Vue 新手。

描述：
让我们以网站的 "dot navigation" 为例。这将是一个组件 (DotSideNavi)，它将使用 v-for 循环呈现 4 "dots" 个组件 (DotNaviElem)。

操作：
当点击一个 "dot"、

所有其他需要停用（删除活动 class）和
点击后需要立即激活

尝试失败：

我尝试在 "dot" el 上使用 $emit 和 $on，所以当我点击一个 "dot" 时，我期待事件要传递给所有 4 "dots"。相反，事件仅针对同一个 "dot" el 触发了 4 次。
Vuex：尝试实现相同的逻辑，但再次仅针对单击的 "dot"
在子-父-子之间来回传递数据被认为是一种不好的做法
识别每个点并使用它来停用它们似乎是解决此问题的错误方法。
据我了解 slots，它们似乎不相关

代码（简体）：

<!-- Side Dot Navi -->
<template>
    <div class="dot-side-nav">
        <dot-navi-elem v-for="(n, index) in 4"
                       v-bind:key="index"
                       v-bind:class="{ 'active': index === 0 }" <!-- just dummy init for activating first dot -->
        />
    </div>
</template>

<script>
    import DotNaviElem from '~/atoms/DotNaviElem.vue';

    export default {
        components: {
            DotNaviElem
        }
    };
</script>

<!-- Dot Navi Element used for Side Dot Navi -->
<template>
    <span class="dot-wrapper "
          v-bind:class="{ active: isCurrentSlide}"
          v-on:click="activateDotNaviElem()"
    >
      <span class="dot"></span>
    </span>
</template>

<script>
    export default {
        data() {
            return {
                isCurrentSlide: false
            };
        },

        methods: {
            activateDotNaviElem() {
                this.isCurrentSlide = !this.isCurrentSlide;
            }
        }
    };
</script>

要求：
不允许其他外部库..

框架：
Nuxt、Vue、Vuex

问题:
有人可以向我解释一下 "vue" 的编码方式并指出正确的资源吗？这必须比现在看起来更简单。

奖金：
我希望能快速解释一下为什么 1. 和 2.（尝试和失败）没有触发所有 "dot" 组件的 events/state 更改？

存储库
您可以在以下存储库中找到包含此示例的项目：
https://github.com/stavros-liaskos/nuxt-fun
相关文件：
components/DotSideNavi.vue（导航）
atoms/DotNaviElem.vue(点元素)

Answer 1

我们开始了。

https://jsfiddle.net/Critycal/rn4mL0n4/

你对事件的第一个方法是正确的。

查看 VueJS 文档中的事件部分。

Vue.component('dot-navigation', {
 data() {
   return {
     index: 0
    }
  },
  template: '<div><p>{{ index }}</p><dot-navigation-element v-for="(n, index) in 4" v-bind:key="index" v-on:test="setActive" :index="n" /></div>' ,
  methods: {
   setActive(index) {
     console.log("sdf")
     this.index = index
    }
  }
});

Vue.component('dot-navigation-element', {
 props: ['index'],
  template: '<span v-on:click="activate">dot</span>',
  methods: {
   activate() {
     console.log("activate");
     this.$emit('test', this.index)
    }
  }
  
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});

<div id="app">
  <dot-navigation></dot-navigation>
</div>

更新了 JSFiddle enter link description here

将数据传递给动态创建的兄弟姐妹

passing data to dynamicaly created siblings

vuejs2

vuex

nuxt.js