如何让容器中显示templateString: '负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}\n', };

要在一个 Vue 组件中使用 `templateString` 显示这些数据，你可以使用 `v-bind` 或者直接插值语法 (`{{}}`) 来绑定变量。这里有一个简单的例子：

<template>
  <div :style="{ whiteSpace: 'pre-wrap' }">
    <p>负责人: {{ item.role1 }}</p>
    <p>工艺负责人: {{ item.role2 }}</p>
    <p>工位编号: {{ item.position }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        role1: "张三",
        role2: "李四",
        position: "001"
      }
    };
  },
};
</script>

在这个例子中，`:style` 是为了确保换行被正确处理，`whiteSpace: 'pre-wrap'` 会使文本保持原样（包括换行）。`item` 对象存储了你需要的数据，每次组件的数据变化时，对应的模板内容也会更新。

如果你想使用 `templateString`，你可以这样做：

<template v-bind:innerHTML="templateString"></template>

<script>
export default {
  data() {
    return {
      templateString: `<p>负责人: {{ item.role1 }}</p><p>工艺负责人: {{ item.role2 }}</p><p>工位编号: {{ item.position }}</p>`,
      item: {
        // ...
      }
    };
  },
};
</script>

这里使用了 `v-bind:innerHTML` 来动态插入 HTML 内容，`item` 的属性依旧会渲染到对应的位置。