如何在 Vue 中不相关的组件之间共享方法？

Question

我可能缺少 VueJS 的一些概念，所以我需要这方面的帮助。我做了一个example 让我的问题更清楚。假设我有一些多功能组件，例如modal 窗口。我正在从 Vuex 获取数据。

./components/modal.vue

<script>
export default {
  methods: {
    modalClose() {
      this.$store.commit("modalClose");
    },
  },
  computed: {
    body() {
      return this.$store.state.modal.body;
    },
    footer() {
      return this.$store.state.modal.footer;
    },
    show() {
      return this.$store.state.modal.show;
    },
  },
};
</script>

<template>
  <div class="wrap" @click.self="modalClose" v-if="show">
    <div id="modal" class="modal">
      <div class="modal-body" v-html="this.body">body</div>
      <div class="modal-footer" v-html="this.footer">footer</div>
    </div>
  </div>
</template>

<style>
/* whatever */
</style>

我有another component，它设置了 Vuex 数据并使用我的模态组件来显示数据。它工作正常 - 它呈现数据。但在某些时候，我需要处理模态窗口中的数据，而这正是我丢失它的地方。

./components/persons.vue

<script>
export default {
  data: function () {
    return {
      persons: [
        { name: "John Johnson", id: 1 },
        { name: "David Lynch", id: 2 },
        { name: "Marshall Attack", id: 3 },
      ],
    };
  },
  methods: {
    showModal: function (person) {
      this.$store.commit("modal", {
        body: "Name: " + person.name,
        footer: `<a href="#" person-id="${person.id}">Add</a>`,
      });
    },
    addPerson: function (id) {
      // how to trigger this function with "Add" button?
      console.log("Success! Person " + id + " was added!");
    },
  },
};
</script>
<template>
  <div id="page1">
    <div v-for="person in persons" :key="person.id">
      {{ person.name }}
      <a href="#" @click="showModal(person)"> Open modal </a>
    </div>
  </div>
</template>

在这个例子中你可以看到方法addPerson。它属于persons.vue，它应该通过单击模态窗口内的“添加”按钮来执行（需要参数）。所以，我有两个问题：

1. 我该怎么做？
2. 我是否在灌输不良做法？

P.S.我读到了$emit，但我没有任何运气。

Answer 1

我没有完全理解您的问题，但基本思想是各种组件可以将数据提交到您的商店。并且还派发动作到存储。并且存储本身应该能够使用已经提交的数据来处理像addPerson 这样的操作。通常在“创建”条目的多个组件的情况下，您的商店（或商店模块）将拥有

• 具有相关条目的状态，例如在一般 CRUD 中，它通常是一个由 people 和 newPerson 组成的数组，用于存储临时条目
• 允许编辑部分数据的突变
• 一个 getter canAddPerson 计算 newPerson 对象中是否有足够的数据来实际创建一个新人
• 使用newPerson 的操作addPerson，可选择执行AJAX POST，提交要包含在人员数组中的新人员并清除newPerson 字段。

我偶尔会遇到的一个警告是，这个 newPerson 不应该是 {}，而是应该使用所有字段 {name: null, height: null, ...} 定义，否则这些字段将不会是响应式的。

我是否在灌输不良做法？

你不应该把 HTML 放在商店里，只是数据。

附：标题中问题的答案是“mixins”，但我认为这不是您在问题正文中提出的问题。

Answer 2

这里有很多剥猫皮的方法。

1. 模态组件将自己的数据写入存储。

由于模态已经从存储中读取数据，您也可以直接从模态中设置存储值。创建一个执行此操作的新方法。这里的好处是模态可以读取和写入自己的数据。缺点是模式现在与您应用中的某种类型的数据相关联，并且通常不可重用。

1. 来自persons.vue 和$emit：

当某个事件发生时，您的模态应该$emit，例如当用户单击“添加”时。无论您在哪里定义了该链接，都将@click="$emit('add', whateverDataYouWantToReturn)" 添加到其中。然后在父组件中，使用模态时使用@add="addPerson($event)" 监听事件。这里的好处是您不一定需要使用商店；您可以将数据作为props 传递给模态，并使用$emit 捕获事件。

1. 在模态框上使用slot：

每当您在父模板中使用模态框时，您都可以在模态框内插入您需要的任何视觉内容，这些内容提供给模态框的插槽。这样做的好处是保持模态组件通常可重用，同时还允许您调用父级上的方法。

Answer 3

看起来很糟糕的钩子。

通常： modal.vue 在persons.vue里面 那么在数据属性中modal show必须为false后（modalShow:false）

如果显示带有所选数据的模态，则必须向模态组件发送“道具”。