PortalVue 可以跨多个 Vue.js 单文件组件使用吗？

Question

目前我正在研究 Vue.js（单文件组件），并找到了三种传递数据的方法：本地状态/道具、存储和 PortalVue。在我使用 PortalVue 进行实验期间，我唯一的成功是在同一个 .vue 文件中同时实现了 portal 和 portal-target，同时尝试使用 portal 和portal-target 跨两个 .vue 文件不起作用。

PortalVue documentation 中声明“PortalVue 是一组两个组件，允许您在文档中的任何位置呈现组件的模板（或其中的一部分） - 甚至在您控制的部分之外Vue 应用程序！”

这是否意味着 PortalVue 仅在两个门户组件位于同一文件时才能工作？

它在一个组件中工作

组件A.vue：

<portal to="destination">
  <p>Send this to destination</p>
</portal>

<portal-target name="destination">
</portal-target>

虽然这不会渲染

组件A.vue：

<portal to="destination">
  <p>Send this to destination</p>
</portal>

ComponentB.vue:

<portal-target name="destination">
</portal-target>

Answer 1

它适用于多个组件。我认为您缺少的是组件必须都同时呈现在页面上，您才能看到门户。

Vue.component('foo', {
	template: '#foo',  
});

Vue.component('bar', {
	template: '#bar',  
});

new Vue({
  el: "#app",
});

.wrapper {
  border: 1px solid black;
  margin: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/portal-vue@1.5.1/dist/portal-vue.min.js"></script>
<div id="app">
  <foo></foo>
  <bar></bar>
</div>

<template id="foo">
  <div class="wrapper">
    Foo
    <portal to="destination">This is from foo</portal>
  </div>
</template>

<template id="bar">
  <div class="wrapper">
    Bar
    <portal-target name="destination"></portal-target>
  </div>
</template>