Question

我仍然无法摆脱Vue的束缚，我需要在这里做一些逃避我的事情。我有一个WS.vue组件，可通过单击复选框将一个类绑定到div（活动）。目前，点击有效。它将类独立地更改为此可重用组件的每次调用。我想更进一步地控制哪些WS组件实例开始活动，哪些不激活。如果该开关加载了激活状态，则该开关仍应能够将其关闭，反之亦然。

这是WS组件：

<template>
  <div class="ws" :class="{active: active}">
    <span class="ws-content">
      <label class="uk-switchl" uk-toggle="target: #toggleSwitch">
        <input type="checkbox" id="toggleSwitch" @change="active = !active" />
        <div class="uk-switch-slider uk-switch-small"></div>
      </label>
    </span>
  </div>
</template>

<script>
export default {
  name: "ws",
  props: {
    active: false
  },
  data() {
    return {
      // active: false,     not necessary I believe
    };
  }
};
</script>

将使用它们的父组件现在看起来像这样

<WS agency1="Boston" />
<WS agency1="Boston" />
<WS agency1="Phildelphia" />
...
...
<WS agency1="Miami" />

我想这样使用它们

<WS agency1="Boston" />
<WS agency1="Phildelphia" active/>

或

<WS agency1="Boston" active="false" />
<WS agency1="Phildelphia" active="true"/>

这样，我可以将active属性绑定到API并通过布尔值对其进行控制

这有意义吗？

Answer 1

简短的答案是，您应该将状态完全保留在父组件中。只需更改复选框即可发出事件，并通知父项何时更改其状态。

您可以这样实现ws组件：

export default {
  props: {
    active: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    onChange() {
      this.$emit('toggle');
    },
  },
};

注意：

我们已删除data
您需要从模板中调用onChange。将@change="active = !active"替换为@change="onChange"。

父组件应该像这样声明一个ws数据数组：

data() {
  return {
    wsData: [
      { name: 'Boston', active: false },
      { name: 'Seattle', active: false },
      { name: 'San Francisco', active: true },
      { name: 'New York', active: false },
    ],
  };
},

父模板可以呈现如下ws组件集：

<ul>
  <li v-for="(ws, index) in wsData" :key="index">
    <WS :agency="ws.name" :active="ws.active" @toggle="toggleState(index)" />
  </li>
</ul>

最后，您将添加一个toggleState方法，如下所示：

methods: {
  toggleState(index) {
    this.wsData[index].active = !this.wsData[index].active;
  }
}

顺便说一句，我建议使用eslint-plugin-vue，然后将其提高到plugin:vue/recommended。这将防止您执行诸如声明隐藏道具之一的data键之类的事情。

通过Vue中的子组件控制道具类

1 个答案: