如何获取Svelte中bind:value元素绑定的对象路径字符串？

Svelte 运行时本身不会把绑定的对象路径作为公开属性挂载到DOM元素上，所以你没法直接通过原生DOM方法读取到该字符串，有两种可落地的实现方式： #

方案1：手动添加自定义数据属性（最推荐） #

直接在绑定bind:value的元素上额外加一个data-自定义属性存储路径字符串，不需要依赖任何内部API，兼容性最好，改造成本极低。

改造模板代码： #

<input 
  type="text" 
  name="prop" 
  bind:value={model.subObject.subSubObject.subSubSubProp}
  <!-- 新增自定义属性存路径 -->
  data-bind-path="model.subObject.subSubObject.subSubSubProp"
>
<span class="error" data-error-for="prop"></span>

对应JS逻辑修改： #

let fields : NodeList = document.querySelectorAll('[data-error-for]');
fields.forEach((v,k) => {
  let nameOf = v.dataset.errorFor;
  let inputEl = document.getElementsByName(nameOf)[0];
  // 直接读取自定义属性拿到路径
  const bindPath = inputEl?.dataset.bindPath;
});

如果觉得写两遍路径麻烦，可以封装成通用的表单输入组件，一次封装后续使用时只需要传一次路径即可：
封装自定义Input组件（Input.svelte）

<script lang="ts">
  export let name: string;
  export let path: string;
  export let value: unknown;
</script>

<input 
  type="text" 
  {name}
  bind:value
  data-bind-path={path}
>

业务中使用组件

<Input 
  name="prop" 
  path="model.subObject.subSubObject.subSubSubProp"
  bind:value={model.subObject.subSubObject.subSubSubProp}
/>

方案2：读取Svelte内部属性（不推荐生产使用） #

Svelte 会给内部管理的DOM元素挂载非公开的__svelte__属性，里面存储了绑定的响应式引用信息，你可以从这里解析出绑定路径，但该API属于Svelte内部实现，不同版本可能发生破坏性变更，仅做参考不建议线上使用。 #

额外提示 #

在Svelte项目中尽量避免直接使用document.querySelectorAll这类原生DOM查询操作，更推荐使用bind:this获取元素引用，或者用Svelte专属的动作（Action） 来处理表单校验相关逻辑，更符合框架设计范式，维护成本更低。

内容的提问来源于stack exchange，提问作者Bojan Vukasovic