vite-plugin-uni-layouts 实现动态布局

目的

实际开发中常常有这样的需求：在 Layout 里有一个 NavBar，在 NavBar 上有一个标题，这个标题的内容由具体渲染的页面来决定。

这个需求可以用 ref 来实现。

样例

在 layout 中 Expose 一个用来设定 NavBar 标题的函数：

<!-- layout.vue -->

<template>
  <navbar :title="navBarTitle"/>
</template>

<script lang="ts" setup>
import {ref, defineExpose} from "vue"

const navBarTitle = ref("")

function setNavBarTitle(val) {
  navBarTitle.value = val
}

defineExpose({ setNavBarTitle })
</script>

在使用 layout.vue 渲染的页面中，通过 ref 引用 uni-layout 组件，调用函数来修改标题。

<!-- page.vue -->

<script lang="ts" setup>
import {ref, onMounted} from "vue"

const uniLayout = ref(null)

onMounted(function() {
  uniLayout.value.setNavBarTitle("子页面标题")
})
</script>

原理

layout 插件提供了一个组件 ，一般情况下，使用了 layout 的页面会被插入到这个组件的 slot 里。但是页面被包裹的过程是在运行时动态执行的，所以无法在使用 layout 的页面的 template 块里自定义 uni-layout 组件的 attribute。

在实际开发的时候，常常需要在 script block 中引用这个组件。这个插件有一个 ref 属性，可以让开发者在实际页面代码中引用运行时被插入到页面中的 uni-layout 组件。

只需声明一个 ref 变量 uniLayout 即可访问。实际使用了 Vue 的 Template Refs 特性。但是在本文写作时 uni-mp-vue 的版本不够新，所以不支持使用 useTemplateRef 函数。