---

布局容器，用于使用编程API动态分层视图。

官方文件RootLayout是在这里，但在NativeScript-Vue中，它不适用于Vue组件，因为RootLayout需要一个NativeScript视图，Vue组件是一个节点，而不是NativeScripte视图。

本文档解释了如何在中从Vue组件创建NativeScript视图原生脚本视图，但本节介绍了一个典型的使用案例RootLayout.

1. 添加RootLayout查看您的应用程序。参考资料.
2. 使用以下命令从Vue组件创建NativeScript视图createNativeView和open根布局。

<script lang="ts" setup>
import { createNativeView } from "nativescript-vue"
import { getRootLayout } from "@nativescript/core"
import MyComponent from "./MyComponent.vue"

function showRootLayout(){
  const node = createNativeView(MyComponent, {
    props: {
      foo: "bar",
      onChange(data){
        // can listen to events launched via `emit`. In this example: `emit("change")`
      }
    }
  })
  node.mount();
  
  getRootLayout()
    .open(node.nativeView, {
      animation: {...},
      ...
    });
}

</script>

<template>
  <Button @tap="showRootLayout" text="Show RootLayout" />
</template>