Question

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

说明
我们来看一个＆＃34;点导航＆＃34;的用例。一个网站。这将是一个组件（DotSideNavi），它将使用v-for循环4＆＃34; dot＆＃34;组件（DotNaviElem）。

操作
点击一个＆＃34; dot＆＃34;，

所有其他人都需要停用（删除活动课程）和
点击后的

尝试失败：

我尝试使用$emit和$on，两者都在＆＃34; dot＆＃34; el，所以当点击一个＆＃34; dot＆＃34;我期待这个活动能够传递给所有的4个点＃34;相反，该事件被触发4次同样的＆＃34;点＆＃34;只有el。
Vuex：尝试实现相同的逻辑，但状态仅针对点击的＆＃34; dot＆＃34;
从孩子 - 父母 - 孩子来回传递数据被视为不良做法
识别每个点并使用它来停用它们似乎是解决此问题的错误方法。
从我读到的关于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

问题：
有人可以解释一下＆＃34; vue＆＃34;对此进行编码并指向正确的资源的方法？这必须比现在看起来更简单。

加成：
我希望快速解释为什么1.和2.（尝试和失败）不会触发所有＆＃34; dot＆＃34;的事件/状态更改。组件？

存储库
您可以在以下存储库中找到包含此示例的项目：
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

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

1 个答案: