Question

LogoutModal.vue

<template>
  <div class="modal LogoutModal" v-bind:class="{'is-active':confirmLogout}">
    <div class="modal-background"></div>
    <div class="modal-content">
    </div>
    <button class="modal-close is-large" aria-label="close" @click="closeModal"></button>
  </div>
</template>

<script>
export default {
  name: "LogoutModal",
  data() {
    return {
      confirmLogout: false
    };
  },
  methods: {
    closeModal: function() {
      this.confirmLogout = false;
    },
    showModal: function() {
      this.confirmLogout = true;
    }
  }
};
</script>

Navigation.vue

<template>
  <aside class="menu">
<ul class="menu-list">
      <li>
        <a @click="showModal">Logout</a>
      </li>
    </ul>
    <LogoutModal />
  </aside>
</template>

<script>
import LogoutModal from "@/components/LogoutModal.vue";
export default {
  name: "Navigation",
  components: {
    LogoutModal
  }
};
</script>

当我单击注销链接时，我想调用showModal函数。我怎样才能做到这一点？或者可以从Navigation.vue更改LogoutModal.vue中的变量。我在LogoutModal.vue中有一个名为ConfirmLogout的变量，必须从Navigation.vue更新。我该怎么办？

Answer 1

您可以在LogoutModal中定义一个动态属性，以设置其状态。有关此内容的更多信息：https://vuejs.org/v2/guide/components-props.html

Answer 2

您应该在导航组件中有confirmLogout，然后将其传递给模态，您还需要一种关闭模态的方法，因此在模态中应使用this。$ emit（'close'）用户已表示要关闭它。

<LogoutModal :open="confirmLogout" @close="confirmLogout=false" />

在退出模式中添加道具

<script>
export default {
  name: "LogoutModal",
  props: ['open'],
...

然后在模板中

  <div class="modal LogoutModal" v-bind:class="{'is-active':open}">

是否可以从另一个vue组件中调用一个vue组件中的函数？

2 个答案: