Javascript 如何在单击时将道具传递到子组件-Vue2

代码背后的想法是，当我在父vue中单击子组件时，将其激活

父vue文件：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

如何在单击时将

选定的
道具发送到子组件？如果我这样设置：

<PackageItem
  :selected="true"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>



它将使所有项目都选择为“真”
，我想将其设置为“仅单击”。
您可以执行以下操作：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="
    selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
  :selected="selected[pack.id]"
>

或者，如果要在单击时在“真”和“假”之间切换：

this.$set('selected', packId, !this.selected[packId])

在“数据”选项中，您应该只有：

selected: []


此外，在子组件中，不需要以下代码：

/* REMOVE
 data () {
   return {
     selected: selected
   }
 },
*/

当你想在脚本中使用选定的道具时，你只需要使用
这个。选定的
，在模板中只需使用
选定的
，你可以像这样做：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="
    selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
  :selected="selected[pack.id]"
>

或者，如果要在单击时在“真”和“假”之间切换：

this.$set('selected', packId, !this.selected[packId])

在“数据”选项中，您应该只有：

selected: []


此外，在子组件中，不需要以下代码：

/* REMOVE
 data () {
   return {
     selected: selected
   }
 },
*/

当你想在脚本中使用选定的道具时，你只需要使用
这个。选中的
，在模板中只需使用
选中的
，你可以通过定义一个数组来存储选定的ID和一个函数来检查选择，从而控制来自父组件的选择

data(){
    return {
        ...
        selected: []
    }
},
methods: {
    isSelected(id){
        return this.selected.indexOf(id) > -1;
    }
}

然后在click方法中，推送已单击项目的id

// Stub for `selectPackageItem` method
if(this.isSelected(id)){
    // Maybe unselect?
} else {
    this.selected.push(id);
}

现在，您的模板变成：-

<PackageItem v-for="pack in packagesData" :selected="isSelected(pack.id)" :key="pack.id" @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)">

您可以通过定义存储选定ID的数组和检查选择的函数来控制父组件的选择

data(){
    return {
        ...
        selected: []
    }
},
methods: {
    isSelected(id){
        return this.selected.indexOf(id) > -1;
    }
}

然后在click方法中，推送已单击项目的id

// Stub for `selectPackageItem` method
if(this.isSelected(id)){
    // Maybe unselect?
} else {
    this.selected.push(id);
}

现在，您的模板变成：-

<PackageItem v-for="pack in packagesData" :selected="isSelected(pack.id)" :key="pack.id" @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)">

我最终得到了一个更优雅的解决方案：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  :selected="selectedPackages(pack.index)"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

selectedPackages
返回一个布尔值
this.packages
是一个包含活动包（已单击）的数组，它包含除
ID
和
索引
之外的许多信息。使用
。一些
我得到了
真
或
假
值，如果单击项的
索引
与数组中的索引完全相同（
this.packages
）。
我最终得到了一个更优雅的解决方案：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  :selected="selectedPackages(pack.index)"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

selectedPackages
返回一个布尔值
this.packages
是一个包含活动包（已单击）的数组，它包含除
ID
和
索引
之外的许多信息。使用
.some
我得到
true
或
false
值，如果单击的项的
索引与数组中的索引完全相同（
this.packages
）。
在所选变量中不使用数组是否可以实现？您确定我可以从子组件中删除
所选
？我的目的是使每个包项目从活动状态切换到错误状态。是的。这是不必要的。只需道具就可以了。
这个。$set
可以在子组件中使用
选定的
？我在vue文档中找不到有关这一时刻的信息。没有。您正在传递子组件中传递的内容：selected=“
”。此.$集用于更新所选值。在所选变量中不使用数组是否可以实现？是否确实可以从子组件中删除所选的
selected
？我的目的是使每个包项目从活动状态切换到错误状态。是的。这是不必要的。只需道具就可以了。
这个。$set
可以在子组件中使用
选定的
？我在vue文档中找不到有关这一时刻的信息。没有。您正在传递子组件中传递的内容：selected=“

”。此.$集用于更新所选值。