既知の問題#

確かに、ポータル-ビューはその動作を可能にするために少しのトリックを使っています。その方法を以下に示します。

disabledを切り替えるとローカルステートが失われる#

ポータルコンポーネントのdisabledステートを切り替えると、ポータルスロット内のコンポーネントが破棄されて再作成され、ローカルステートの変更がすべて失われます。

ステートを永続化するために、ステート管理を使用してください。

provide/inject#

Vueが親コンポーネントから提供されるものを解決する方法のため、PortalTargetの親で提供されるオブジェクトを探します。つまり、Portalの親のprovideされたオブジェクトはポータル内のコンポーネントでは使用できませんが、PortalTargetの親によって提供されるオブジェクトにはアクセスできます。

また、複数のポータルを使用してコンテンツを1つのPortalTargetに送信する場合、どのポータルのインジェクションを使用する必要があるかは不明です。

$parent#

同じ理由から、this.$parentはPortalの親を返しませんが、PortalTargetを返すため、$parentに依存するコードが壊れる可能性があります。

vue-router#

RouterViewは内部的に$parentチェインを移動して、親RouterViewコンポーネントがいくつあるかを調べます。したがって、Portal内のRouterViewはそのネストされたルートに適切に一致できません。議論については#289を参照してください。

$refs#

TODO: refsに関するこの部分は現在も適用されるか、変更する必要があるかを確認してください。

まれに、refを使用してPortalコンテンツ内のDOM要素/コンポーネントにアクセスする場合があります。これは機能しますが、時にはダブル$nextTickが必要になる場合があります。

this.$nextTick().then(
  this.$nextTick(() => {
    this.$refs.yourRef // element should now be in the DOM.
  })
)

その理由は、シナリオによっては、コンテンツがワームホール（ポータルとポータルターゲットの中間者）に送信されるまでに1ティック、ポータルターゲットによってピックアップされるまでに1ティックかかる場合があります。