如何在不同的组件中重用SFC Vue组件示例？

nnsrf1az 于 2022-11-30 发布在 Vue.js

关注(0)|答案(1)|浏览(225)

动机：

我有一个单一的文件组件，比如播放器，它可以显示视频或一些图像。因为它占用了大量的内存，而且它在许多页面中使用（根目录下的组件），我只想示例化它一次，并在依赖它的每个页面中重用它。另外，播放器在一些页面中调整了大小，所以我需要它是动态可调的，这意味着它应该支持道具。此外，由于有很多页面使用Player，我希望可以使用Vue的Provide / Inject功能将Player传播到任何地方。

当前：

第一个

预期：

综上所述，Player在我的想象中具有以下特点：
1.在根组件中启动。
1.根组件Provide Player到它下面的每个组件。
1.根目录下的页面可以通过某种方式将道具传递给Injected播放器以调整其大小。
这只是我的想象，任何其他可用的解决方案都是受欢迎的。

我尝试过的：

我试过initiate Player in memory，但我不知道如何渲染它。
我尝试initiate Player as a dynamic component，但我不知道在哪里放置插槽，以及如何启动播放器。
我试着理解render函数来重新渲染它，但我不知道如何在我的情况下利用它。
This post似乎是最接近的解决方案，但我仍然对如何实现其中描述有限的概念感到困惑。

vue.js

来源：https://stackoverflow.com/questions/74595855/how-to-reuse-a-sfc-vue-component-instance-in-different-components

1条答案

按热度按时间

hgqdbh6s1#

有两种方法-
1.全局导入main.js文件中的组件，并在任何页面上自由使用，即-

import Vue from "vue";  
    import Player from "@/components/Player.vue";  
    Vue.component("AppButton", AppButton);

1.在mixins目录中创建一个名为playerMixin.js的mixin。
在该mixin中导入Player组件，并在所有页面中导入该mixin。
mixin代码应该如下所示-

播放器Mixin.js

import Player from "@/components/Player.vue";

export const playerMixin = {
  data() {
    // any data properties related to player functionalities 
  },

  components: {
    Player,
  },

  methods: {
    // any methods related to player functionalities
  }
}

现在，你可以在任何页面上使用这个mixin，就像这样-

任何页面.版本

import { playerMixin} from "@/mixins/playerMixin.js";

export default {
  name: "AnyPage",
  mixins: [playerMixin],
}

使用mixin的主要好处是，不仅组件将被导入一次，而且播放器的通用功能也是相同的，这对于每个页面都是一样的，比如传递道具，以及播放、暂停等方法都可以被写入一次，并且可以被任何页面使用。
要了解有关mixin的更多信息，请访问read this。

赞(0）回复(0）举报 2022-11-30

我来回答

如何在不同的组件中重用SFC Vue组件示例？

1条答案

相关问题

热门标签

最新问答