是否有A＆＃x27; Simple＆＃x27;在Vue中动态渲染视图的方法？

Question

让我们退后一步，看看用例：

您正在定义模块化接口，并且任何实现其实现的模块都必须能够“渲染自身”到给定的插槽和状态的应用程序中。

您如何在Vue中进行？

示例解决方案

让我们看看我可以组装的最基本的实现：（

完整示例： https://stackblitz.com/edit/vitejs-vite- 8zclnp？file = src/app.vue ）

我们有一个布局：

# Layout.vue
<template>
  <div>
    <hr />
    <slot name="moduleView" />
    <hr />
  </div>
</template>

...和一个带有模块的应用程序：

# App.vue
<script lang="ts" setup>
import type { MyModuleState } from "./MyModule";
import Layout from "./Layout.vue";
import { ref } from "vue";
import { MyModule } from "./MyModule";
import ModView from "./ModView.vue";

const state = ref<MyModuleState>({ value: 0 });
const module = new MyModule();

const onClick = () => {
  state.value = { value: state.value.value + 1 };
};

const renderModule = () => {
  return module.view(state.value);
};
</script>

<template>
  <div>currentValue: {{ state.value }}</div>
  <div>update: <button @click="onClick">++</button></div>
  <div>
    <Layout>
      <template v-slot:moduleView>
        <mod-view :render="renderModule" :state="state" />  // <--- But this!
      </template>
    </Layout>
  </div>
</template>

...但是呈现到插槽中需要大量通过晦涩难懂的箍：

# ModView.vue
<script lang="ts" setup>
import ModRender from "./ModRender";
import { ref, watch } from "vue";
import type { VNode } from "vue";

const props = defineProps<{
  render: (state?: any) => VNode | Array<VNode>;
  state?: any;
}>();

const nodes = ref(props.render(props.state));

watch( // <-- Obscure! The view won't update unless you explicitly watch props?
  () => props.state,
  (nextState) => {
    nodes.value = props.render(nextState);
  }
);
</script>

<template>
  <mod-render :nodes="nodes" />
</template>

# ModRender.ts
import type { VNode } from "vue";

const ModRender = (props: { nodes: VNode | Array<VNode> }) => {
  return props.nodes;
};

ModRender.props = {
  nodes: {
    required: true,
  },
};

export default ModRender; // <--- Super obscure, why do you need a functional component for this?

在我们可以定义之前实际模块：

# MyModule.ts
import type { VNode } from "vue";
import { h } from "vue";
import ModuleView from "./MyModuleDisplay.vue";

interface AbstractModule<T> {
  view: (state: T) => VNode;
}

export interface MyModuleState {
  value: number;
}

export class MyModule implements AbstractModule<MyModuleState> {
  view(state: MyModuleState): VNode {
    return h(ModuleView, { state });
  }
}

...和一个组件：

# MyModuleView.vue
<script setup lang="ts">
import type { MyModuleState } from "./MyModule";
const props = defineProps<{ state: MyModuleState }>();
</script>

<template>
  <div>{{ state.value }}</div>
</template>

什么。

这似乎非常钝和冗长。

我想念什么吗？

在其他组件系统中，实现可能看起来像：

export class MyModule implements AbstractModule<MyModuleState> {
  view(state: MyModuleState): VNode {
    return (<div>{state.value}</div>);
  }
}

...

<div>
  <Layout>{renderModule(state)}</Layout>
</div>

令人惊讶的是，必须在Vue中完成如此多的包装和篮球，这使我感到自己缺少某些东西。

有一个更简单的方法吗？

Answer 1

Vnode对象不能像modrender这样的组件中呈现在组件模板中。如果它们被用作通用方式来交换应用程序中的模板数据，那是一个问题。 Vnodes仍然可以直接用于组件渲染函数和功能组件，具有JSX或H喜欢＆lt; layout＆gt; {rendermodule（state）}＆lt;/layout;/layout＆gt;，这限制他们的用法。

AbstractModule如果会导致不必要的代码，则可能需要重新考虑约定。从某个时候，需要与动态＆gt;一起使用“视图”的事实，并且它将尽可能简单地使用。

可能没有必要进行“模块”抽象，但是即使存在，module.view也可以返回组件（功能或状态）而不是vnodes。或者它可以构建一个组件并使其作为属性可用，例如：

class MyModule {
  constructor(state) {
    this.viewComponent = (props) => h(ModuleView, { state, ...props })
  }
}