Radiobutton-like 个行为 Vue.js 个组件

Question

我有以下 Vue.js 组件，它们基本上应该具有 radiobutton-like 行为：

// Parent Component
<template>
  <child-component
    v-for="element in elements"
  </child-component>
</template>

<script>
import ChildComponent from './Child.vue'

export default {
  components: {
    ChildComponent
  },
  props: {
    elements: Array
  },
  methods: {
    activate(e) {
      for (let i of this.$children) {
        i.active = false;
      }

      if (e < this.$children.length) {
        this.$children[e].active = true;
      }
    }
  }
}
</script>

和

// Child Component
<template>
  {{active}}
</template>

<script>
export default {
  props: {
    active: Boolean
  }
}
</script>

这很好用，但只有 parent 可以决定激活其中一个 children（从而停用所有其他）。

但是我也希望能够允许每个 child 激活自身（并且通过其 parent 的魔法属性，停用所有其他兄弟姐妹）。

显然我不希望每个 child 都知道它的兄弟姐妹并弄乱他们的 .active 道具（超级糟糕的设计）。

我宁愿不让 children 与 parent 通信并调用一些方法（仍然是糟糕的设计，因为我只能在 parent 有 activate() 方法）。

相反，我希望 parent 监听所有 children active 道具的变化，并在其中一个道具发生变化时采取行动。这样 parent 就完全封装了单选按钮的行为。

如何在 Vue.js 中实现这种交互？

Answer 1

看看 two-way 绑定：http://vuejs.org/guide/components.html#Prop_Binding_Types

这允许您在两个方向上同步属性的值，这意味着 parent 或 child 有权更改变量。然后你可以在 parent 上观察变化并相应地更新。

我认为更好的选择是创建一个 RadioSet 组件，然后在该组件中放置多个单选按钮。这将消除您对 parent 必须具有 activate() 方法的担忧。您可以简单地传入一个 object 和一系列 id 和 values 来生成按钮。

Radiobutton-like 个行为 Vue.js 个组件

Radiobutton-like behaving Vue.js components

javascript

components

vue.js