时间戳

首页 > 解决方案 > 从外部触发组件

vue.js - 从外部触发组件

问题描述

所以我正在尝试创建一个可重用的模态组件。v-if我如何才能真正传递从组件外部触发的 toggleModal事物？此外，我不希望出现这样一种情况，即我在一个组件中获得了 2 个模态，并且通过触发一个，它会打开所有这些模态，而不是仅打开我单击的那个。我应该如何处理这个？

<div class="modal" v-if="toggleModal">
..content
</div>

 props: {
    title: {
      type: String,
      default: 'Title',
    },
  },
  setup() {
    let toggleModal = ref(true)

    return { toggleModal }
  },

标签： vue.jsvuejs2vuejs3

解决方案

您可以添加另一个属性 toggleModal ，这样当它在父组件中更改时，它会直接在子组件中更改在父组件中：

<template>
    <Modal :toggleModal="toggleModal1" v-on:ok="toggleModal1=false" />
    <Modal :toggleModal="toggleModal2"/>
</template>

data() {
    return{
        toggleModal1: false,
        toggleModal2: true,
    }
}

在子组件中：

 props: {
    title: {
      type: String,
      default: 'Title',
    },
    toggleModal: {
      type: Boolean,
      default: false,
    },
  },

推荐阅读