Question

目标： 构建一个接受html字符串的布局组件，用适当的组件替换[PLACEHOLDERS]，并使用适当的组件呈现HTML结构。

给出： 在下面，第一个样本在child div之外具有[MAIN_NAV_DDM]和[SLIDER]，而第二个样本在child div内具有[SLIDER]和[SUB_NAV]。

示例1 HTML字符串

<div class="container-fluid">
  <div class="wrapper">
    <div class="wrapper--inner">
      <div class="flex-container--nav">[MAIN_NAV_DDM]</div>
      <div class="flex-container--slider">[SLIDER]</div>
      <div class="child">
        <div class="flex-container--main-content">[CONTENT]</div>
      </div>
    </div>
  </div>
</div>

示例2 HTML字符串

<div class="container-fluid">
  <div class="wrapper">
    <div class="wrapper--inner">
      <div class="flex-container--nav">[MAIN_NAV]</div>
      <div class="child">
        <div class="flex-container--slider">[SLIDER]</div>
        <div class="flex-container--subnav">[SUB_NAV]</div>
      </div>
    </div>
    <div class="flex-container--main-content">[CONTENT]</div>
  </div>
</div>

问题： 如何使用一个组件，该组件可以接受从API返回的示例1或示例2，并为页面呈现适当的布局？

这可以在服务器端完成吗？

该单个组件还需要用适当的匹配组件替换[PLACEHOLDERS]。例如，[SLIDER]会接受包含slider-component的网址（和其他参数）的对象和数组，以供呈现转盘时使用。{p>

-

我尝试过的事情： 全局注册组件

异步导航组件（main.js）

Vue.component("async-slider", () => import("./components/SliderComp.vue"));

具有渲染功能（main.js）的布局生成器组件

Vue.component("layout-generator", {
  props: {
    code: String
  },
  render(h) {
    return h("div", [h(Vue.compile(this.code))]);
  }
});

将layout-generator组件与支持从数据对象（App.vue）接收html的道具一起使用

<template>
  <div id="app">
    <layout-generator :code="html" />
  </div>
</template>

创建了生命周期挂钩，从API获取HTML字符串，并使用响应（App.vue）填充数据对象

export default {
  data() {
    return {
      html: "",
    };
  },
  methods: {
    getData() {
      let tempHtml = `Sample 1 HTML String Above`
      tempHtml = tempHtml.replace("[SLIDER]", "<async-slider />");
      this.html = tempHtml;
    }
  },
  created() {
    this.getData();
  }
};

我是在正确的道路上吗，还是有点过时？感觉有一种更好的方法，我无法弄清楚。

这是否可以通过API调用使用点网核心和Vue服务器端渲染来实现？

那是真正想要的结果。让服务器拉出html字符串，用组件替换占位符，使用通过props传递给它们的数据正确渲染那些组件，然后将完整的字符串返回给浏览器进行渲染。

干杯！

使用Vue，如何从API返回的字符串中呈现不同的HTML布局格式？

0 个答案: