Vuejs2 将数据传递给Dynamicly创建的同级

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

说明：
让我们以网站的“点导航”为例。这将是一个组件（DotSideNavi），它将使用v-for循环4“点”组件（DotNaviElem）进行渲染

操作：
单击一个“点”时

所有其他需要停用（删除活动类）和

点击的一个需要被激活后立即

尝试失败：

我尝试在“点”el处使用

$emit

和

$on

，因此当单击一个“点”时，我希望事件传递到所有4个“点”。相反，该事件仅针对同一个“点”el触发4次

Vuex

：尝试实现相同的逻辑，但仅对单击的“点”再次更改状态

从子级到父级来回传递数据被认为是一种不好的做法

识别每个点并用它去激活它们似乎是解决这个问题的错误方法

从我读到的

插槽

，它们似乎不相关

代码（简化）：

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

/
从“~/atoms/DotNaviElem.vue”导入DotNaviElem；
导出默认值{
组成部分：{
多特纳维勒姆
}
};
导出默认值{
数据（）{
返回{
当前幻灯片：错误
};
},
方法：{
激活的tNAVIELEM（）{
this.isCurrentSlide=！this.isCurrentSlide；
}
}
};

要求：
不允许使用其他外部库

框架：
Nuxt、Vue、Vuex

问题：
有人能告诉我什么是“vue”编码方式，并给我指出正确的资源吗？这必须比现在看起来更简单

奖金：
如果您能快速解释一下原因，我将不胜感激。二,。（尝试和失败）是否未触发所有“点”组件的事件/状态更改

存储库
您可以在以下存储库中找到包含此示例的项目：

相关文件：
组件/DotSideNavi.vue（导航）
atoms/DotNaviElem.vue（点元素）

我们开始吧

你第一次对事件的分析是正确的

查看VueJS文档中的事件部分

Vue.component（'dot-navigation'{
数据（）{
返回{
索引：0
}
},
模板：“{{index}}
”，
方法：{
设置活动（索引）{
控制台日志（“sdf”）
this.index=索引
}
}
});
Vue.组件（'dot-navigation-element'{
道具：[“索引”]，
模板：“点”，
方法：{
激活（）{
控制台日志（“激活”）；
this.$emit（'test'，this.index）
}
}
});
//创建一个新的Vue实例，并将其装载到上面id为app的div元素中
var vm=新的Vue({
el:“#应用程序”
});

你能提供一个提琴吗？@Borjante我编辑了我的原始帖子，以包含上述示例据我所知，在上面的代码片段中，父项（点导航）可以识别单击了哪个子项（点导航元素），但不会停用其余部分，这实际上是预期的结果。现在您只需要将活动索引传递给元素，然后每个元素都必须检查其索引是否为活动元素的==即可。