Question

当前，我正在研究Vue.js（单个文件组件），发现了三种传递数据的方式：本地状态/道具，商店和PortalVue（https://markus.oberlehner.net/images/2018-05-27/should-i-store-this-data-in-vuex-flow-chart.png）。在我尝试PortalVue的过程中，我唯一的成功是在同一个.vue文件中同时实现了 portal 和 portal-target ，同时尝试使用 portal 和跨两个.vue文件的 portal-target 无效。

PortalVue文档https://linusborg.github.io/portal-vue/#/guide中指出：“ PortalVue是两个组件的集合，可让您在文档中的任何位置（甚至在零件外部）呈现组件的模板（或其一部分）由您的Vue应用程序控制！“

这是否意味着PortalVue仅在两个门户网站组件都位于同一文件中时起作用？

它在一个组件中起作用

ComponentA.vue：

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

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

虽然无法渲染

ComponentA.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>

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

1 个答案: