如何让div容器中显示templateString: ‘负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}\n’, };，且在页面中显示，不使用v-bind，内容会动态变化

要在一个 Vue 组件中动态地渲染 `templateString` 的内容并且不使用 `v-bind`（即不直接绑定数据），你可以利用 Vue 的模板编译特性。你可以创建一个自定义指令来做到这一点。首先，你需要在组件的选项中定义这个指令：

<template>
  <div :custom-template="item">
    <!-- 这里将会显示 templateString -->
  </div>
</template>

<script>
export default {
  directives: {
    customTemplate: {
      bind(el, binding, vnode) {
        const text = binding.value;
        el.textContent = text.replace(/\{\{(\w+)\}\}/g, (match, key) => {
          // 获取当前组件实例中的对应属性值
          return vnode.context[key];
        });
      }
    }
  },
  data() {
    return {
      item: '负责人: {{ role1 }}\n工艺负责人: {{ role2 }}\n工位编号: {{ position }}'
    };
  },
  // 假设这里有一个名为 roles 的计算属性，它包含 role1 和 role2 的值
  computed: {
    roles() {
      return { role1: 'John Doe', role2: 'Jane Smith' }; // 你的数据模型
    }
  }
};
</script>

在这个例子中，我们定义了一个名为 `custom-template` 的自定义指令，当它被绑定到元素时，我们会遍历字符串并替换 `{{ ... }}` 格式的表达式为对应的属性值。这里假设 `roles` 是一个计算属性，包含了 `role1` 和 `role2`。

如果你的数据结构不同，只需要相应地调整 `roles` 计算属性即可。记得在实际项目中，根据你的应用需求提供正确的数据来源。