vuejs2 - 将数据传递给动态创建的 sibling

Question

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

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

操作:
当点击一个“点”时，

1. 所有其他都需要停用(删除事件类)并且
2. 点击后需要立即激活

尝试和失败:

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

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

3. 在子-父-子之间来回传递数据被认为是一种不好的做法
4. 识别每个点并使用它来停用它们似乎是解决此问题的错误方法。
5. 根据我对插槽的了解，它们似乎不相关

代码(简化):

<!-- 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(导航)
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