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

Question

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

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

操作：
单击一个“点”时，

1. 所有其他都需要停用（删除活动类）和
2. 点击后需要立即激活

尝试和失败：

1. 我尝试在“点”el 处使用$emit 和$on，所以当单击一个“点”时，我希望事件会传递给所有4 个“点”。相反，该事件仅针对同一个“点”el 触发了 4 次。

2. Vuex: 尝试实现相同的逻辑，但再次只为单击的“点”更改状态

3. 在 child-parent-child 之间来回传递数据被认为是一种不好的做法
4. 识别每个点并使用它来禁用它们似乎是解决此问题的错误方法。
5. 从我读到的关于 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.（尝试和失败）没有触发所有“点”组件的事件/状态更改？

存储库
您可以在以下存储库中找到包含此示例的项目：
https://github.com/stavros-liaskos/nuxt-fun
相关文件：
组件/DotSideNavi.vue（导航）
atom/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