时间戳

首页 > 解决方案 > Vue：将点击事件绑定到一个组件，将值发送到另一个

javascript - Vue：将点击事件绑定到一个组件，将值发送到另一个

问题描述

我有一个父组件和两个子组件。第一个孩子是产品卡片，第二个孩子是模式窗口。我想点击卡片将真实值发送到模态并显示它。这是我的 App.vue 组件中的模板：

<template>
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <h2 v-text="region"></h2>
      <div class="deputates">
        <deputy
          class="deputy"
          v-for="deputy in deputates_in_regions(region)"
          :key="deputy.id"
          :deputy="deputy"
          @click="open_modal"
        ></deputy>
      </div>
    </div>
    <modal
      class="modal"
      v-for="deputy in deputates"
      :key="deputy.id"
      :deputy="deputy"
      :modal_open="modal_open"
    ></modal>
  </div>
</template>

open_modal 默认为 false：

export default {
  name: "app",
  data () {
    return {
      modal_open: false

我想让它成为现实：

open_modal() {
      this.modal_open = true
    }

在组件中接收它：

export default {
    name: "modal",
    props: {
        deputy: Object,
        modal_open: {
            type: Boolean,
            required: true
        }
    }

并显示一个模态窗口：

<template>
    <div class="modal" v-show="modal_open">
        <p>{{ deputy.modal }}</p>
    </div>
</template>

但是我的代码不起作用。

标签： javascriptvue.jsvue-component

解决方案

您的代码看起来您​​的目标是同时显示多个模式。这通常不是你想要的。

在这种情况下，我通常会这样做：

export default {
  name: "app",
  data () {
    return {
      modal_open: false,
      modal_deputy: null,
  }
}

在方法中：

open_modal(deputy) {
  this.modal_open = true;
  this.modal_deputy = deputy
}

模态调用：

<deputy
  class="deputy"
  v-for="deputy in deputates_in_regions(region)"
  :key="deputy.id"
  :deputy="deputy"
  @click="open_modal(debuty)"
></deputy>

<modal
  class="modal"
  :key="deputy.id"
  :deputy="modal_deputy"
  v-if="modal_open"
></modal>

模态本身根本不需要处理显示，父级可以使用 v-if 处理。

<template>
    <div class="modal">
        <p>{{ deputy.whateverYouWantToShow }}</p>
    </div>
</template>

查看工作代码沙箱：https ://codesandbox.io/s/2019-11-11deputates-z125f?from-embed

注意@click-handler 上的 .native 修饰符和 :key="modal_deputy.id" 而不是 :key="deputy.id"。

推荐阅读