从 vue 中的子组件控制一个 prop 类

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 键来隐藏你的一个道具。