Question

我真的是Vue的新手，似乎无法了解如何将事件从一个组件传递到其他组件。我当前正在使用v-blur，并且我想模糊除单击的组件之外的所有组件。我想通过在单击原始组件时将事件传递给其他组件，可以达到想要的效果。任何帮助深表感谢！

// Parent.vue
<template>
  <div id="Parent">
    <child-one @toggle-blur="toggleChildBlur"/>
    <child-two @toggle-blur="toggleChildBlur"/>
    <child-three @toggle-blur="toggleChildBlur"/>
  </div>
</template>

<script>
import ChildOne from './ChildOne'
import ChildTwo from './ChildTwo'
import ChildThree from './ChildThree'

export default {
  name: 'Parent',
  components: {
    ChildOne, ChildTwo, ChildThree
  },
  methods: {
    toggleChildBlur () {
      // Blur every child except the clicked one?
    }
  },
  data () {
    return {}
  }
}
</script>

// ChildOne.vue, basically the same for two and three aswell
<template>
  <div id="child-one" v-blur="blurConfig" @click="$emit('toggle-blur')"></div>
</template>

<script>
export default {
  name: 'ChildOne',
  methods: {
    toggleBlur () {
      this.blurConfig.isBlurred = !this.blurConfig.isBlurred;
    }
  },
  data () {
    return {
      blurConfig: {
        isBlurred: false,
        opacity: 0.3,
        filter: 'blur(1.2px)',
        transition: 'all .3s linear'
      }
    }
  }
}
</script>

Answer 1

在Vue中调度的事件沿一个方向传播：孩子⇒父母。如果您有组件P（父级），子级C1（子级1）和子级C2（子级2），则无法在C1中触发事件并将其发送给C2。它将转到P。

如果您具有非常嵌套的结构（很多级别），并且确实需要这样做，那么最简单的方法是在不属于显示列表的某个对象（即全局对象）上调度并监听事件。非常典型的解决方案是拥有所谓的“事件总线”-一个单独的虚拟Vue实例，您仅将其用于事件。这是有关Global Event Bus in Vue的完整教程。

它看起来像这样：

// in some global file
const EventBus = new Vue();

// in GC1 (parent -> child 1 -> grand child 1)
EventBus.$emit('someEvent', 'some-data')

// in GC5 (parent -> child 3 -> grand child 5)
EventBus.$on('someEvent', function(data) {
  console.log(data) // 'some-data
})

通过这种方式，您可以轻松地在各处分发/捕获事件。

祝你好运！：）

Answer 2

我想出了一种最终获得想要的效果的方法。我的解决方案可能不是很可扩展，但现在可以使用！我从发射器传递子索引并循环通过，以模糊除单击的子索引以外的每个组件。

// ChildOne.vue
// Basically the same for two and three as well except sending corresponding index
// on click event.

// Click event is now sending the index of the component to know which one got clicked.
<template>
  <div id="child-one" @click="$emit('toggle-blur', 0)"></div>
</template>

// Parent.vue

// Every child component now gets their separate blur config.
// When child is clicked the index of the child now gets sent to help skip and blur
// the other components.
<template>
  <div id="parent">
    <child-one v-blur="blurConfig[0]" @toggle-blur="toggleChildBlur"/>
    <child-two v-blur="blurConfig[1]" @toggle-blur="toggleChildBlur"/>
    <child-three v-blur="blurConfig[2]" @toggle-blur="toggleChildBlur"/>
  </div>
</template>

<script>
import ChildOne from './ChildOne'
import ChildTwo from './ChildTwo'
import ChildThree from './ChildThree'

export default {
  name: 'Parent',
  components: {
    ChildOne, ChildTwo, ChildThree
  },
  methods: {
    toggleChildBlur (childIndex) {
      // Unblur if click event is outside focused component
      if (this.blurConfig[childIndex].isBlurred) {
        for (let i = 0; i < this.blurConfig.length; i++) {
          this.blurConfig[i].isBlurred = false
        }
      } else {
        for (let i = 0; i < this.blurConfig.length; i++) {
          if (i !== childIndex) {
            this.blurConfig[i].isBlurred = !this.blurConfig[i].isBlurred
          }
        }
      }
    }
  },
  data () {
    return {
      // Blur settings for each component
      blurConfig: [
        {
          isBlurred: false,
          opacity: 0.2,
          filter: 'blur(1.2px)',
          transition: 'all .2s linear'
        },
        {
          isBlurred: false,
          opacity: 0.2,
          filter: 'blur(1.2px)',
          transition: 'all .2s linear'
        },
        {
          isBlurred: false,
          opacity: 0.2,
          filter: 'blur(1.2px)',
          transition: 'all .2s linear'
        }
      ]
    }
  }
}
</script>

将事件从一个组件传递到其他组件

2 个答案: