时间戳

首页 > 解决方案 > 来自全局组件的 Vue/Nuxt 访问函数

javascript - 来自全局组件的 Vue/Nuxt 访问函数

问题描述

我的 NUXT 应用程序默认布局中有一个全局注册的组件（模态），我希望能够在点击事件上触发来自任何其他组件的方法。我最初通过将组件导入每个页面来设置它，但我宁愿这是一个全局组件，而不必在每个页面上显式导入，并且在默认布局中只调用一个寄存器。我使用 $root.$emit 可以做到这一点吗？还是我应该看看 vue 商店？

默认布局：

<template>
  <div class="layout-wrapper">

    <Nuxt />

    <Modal />

  </div>
</template>

    <script>
    import Modal from "~/components/Modal.vue";
    
    export default {
      name: "DefaultLayout",
      components: {
       Modal
      }
    };
    </script>

模态：

<template>
  <div>
    <el-dialog :visible.sync="modal">
      <div class="dialog-content">
        <p>
         Modal Content
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Dialog } from "element-ui";

export default {
  name: "Modal",
  components: {
    "el-dialog": Dialog
  },
  data() {
    return {
      modalOne: false
    };
  },
  methods: {
    openModal() {
      this.modalOne = true;
    }
  }
};
</script>

要调用方法的其他组件：

 <a href="javascript:void(0)" @click="openModal">Open</a>

标签： javascriptvue.jsnuxt.js

解决方案

使用商店是满足您需求的一个很好的解决方案：

1/ 创建存储文件store/index.js

export const state = () => ({
  modal: false
});

export const mutations = {
  SET_MODAL (state, value) {
    state.modal = value
  }
};

2/ 更新您的布局以将商店数据设置为模态组件：

<template>
  <div class="layout-wrapper">
    <Nuxt />
    <Modal open="$store.state.modal" />
  </div>
</template>

3/ 更新您的组件以读取open值：

<template>
  <div>
    <el-dialog :visible.sync="open">
      <div class="dialog-content">
        <p>
         Modal Content
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Dialog } from "element-ui";

export default {
  props: {
    open: Boolean // see https://vuejs.org/v2/guide/components-props.html
  },
  name: "Modal",
  components: {
    "el-dialog": Dialog
  }
};
</script>

4/ 从 nuxt 页面切换存储值（请参阅https://nuxtjs.org/docs/2.x/directory-structure/store）

<script>
export default {
  methods: {
    openModal (e) {
      this.$store.commit('SET_MODAL', true);
    }
  },
  ...
}
</script>

推荐阅读