跳到主要内容

视图容器

用于引用和管理其他 Vue 文件的组件。

  • 当应用中包含多个视图时，可以使用视图容器来统一管理和引用。
  • 在需要展示多个子组件的场景中，视图容器可以帮助简化引入过程。

一、属性​

1. 主要属性​

1）功能​

页面：选择两种引入方式，页面和链接，默认为页面。

image-20240830160711553

image-20240830161120669

页面模式下可直接选择当前项目的视图页面直接引入，链接模式暂未完全支持。

image-20240830161220712

2）页面/组件参数​

页面/组件参数：如果引入的页面需要传入视图参数，在视图容器这里会自动生成一个同名的页面参数。赋值有三种形式：文本、页面参数和成员变量。

  • 手动赋值：即固定值。
  • 字段：视图容器外层的组件获取到的数据源中的属性值。
  • 视图参数：视图容器所在页面接收到的页面参数。
  • 成员变量：本页面内其他组件的值。

image-20250612094610772

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

  1. 模块化开发
    在大型应用中，将不同功能模块封装为独立的 Vue 组件，通过视图容器进行引用，提升代码的可维护性和可重用性。

    image-20240826090554835

  2. 统一样式和布局
    使用视图容器可以确保引用的视图组件在样式和布局上保持一致，提升整体视觉效果。

  3. 状态管理
    在需要共享状态或数据的多个视图之间，视图容器可以作为中心点，方便进行状态的管理和传递。

  4. 提升可读性
    将复杂的视图逻辑封装在视图容器内，使主组件的代码更加简洁，提高代码的可读性。