Question

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

// 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>

这样可以正常工作，但只有父母可以决定激活其中一个孩子（从而停用所有其他孩子）。

我希望能够允许每个孩子自己激活（并通过其父级的魔法属性，停用所有其他兄弟姐妹）。

显然，我不希望每个孩子都知道他们的兄弟姐妹和他们的.active道具（超级糟糕的设计）。

我宁愿没有孩子与父母沟通并调用一些方法（仍然是糟糕的设计，因为我只能在具有activate()方法的父母中重复使用子组件。）

相反，我希望家长听取对所有子active道具的更改，并在其中一个更改时采取行动。这样父母就完全封装了单选按钮的行为。

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

Answer 1

看看双向绑定：http://vuejs.org/guide/components.html#Prop_Binding_Types

这允许您在两个方向上同步属性的值，这意味着父级或子级有权更改变量。然后，您可以查看父项的更改并相应地进行更新。

我认为更好的选择是创建一个RadioSet组件，然后容纳一些单选按钮。这将消除您对父母必须使用activate()方法的担忧。您只需传入一个对象，其中包含一系列可用于生成按钮的id和values。

像Radiobutton一样表现Vue.js组件

1 个答案: