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

Posted 2023-02-22

【中文标题】从 vue 中的子组件控制一个 prop 类

【英文标题】：Controlling a prop class from the child component in vue

【发布时间】：2019-12-24 00:51:57

【问题描述】：

我仍然掌握了 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 并通过布尔值控制它

这有意义吗？

【参考方案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 键来隐藏你的一个道具。

【讨论】：

我喜欢这个结构。比我的更专业和可扩展。但它不起作用。 v-for 出于某种原因没有循环。该机构也没有显示。切换功能虽然

不幸的是，没有所有代码很难调试。请注意，您需要在 ws 组件声明中将 agency 添加到您的道具中。我将它们关闭，因为它与示例无关。如果您可以使用所有工作的最小示例创建一个小提琴，我可以看看。