如何通过HTML属性向Vue实例传递JSON格式数据

问题原因 #

你的代码存在两个核心错误：

1. HTML属性引号冲突：你用双引号包裹data-json属性值，而JSON内部本身也使用双引号，浏览器解析时遇到JSON内的第一个双引号就会判定属性结束，因此只能读取到{。
2. Render函数this指向错误：你使用箭头函数定义render，箭头函数的this会绑定上层作用域，无法指向当前Vue实例，无法通过this.dataset获取属性值。

解决方案 #

第一步：修正HTML属性写法

两种二选一即可：

• 方案1：用单引号包裹JSON属性值（更简单）

<div id="app" data-number="2" data-json='{"name":"John", "age":30, "car":null}'></div>

• 方案2：保持外层双引号，把JSON内的双引号转义为HTML实体"

<div id="app" data-number="2" data-json="{&quot;name&quot;:&quot;John&quot;, &quot;age&quot;:30, &quot;car&quot;:null}"></div>

第二步：修正Vue实例代码

将render改为普通函数获取正确this，同时对拿到的JSON字符串做解析处理：

new Vue({
  el: '#app',
  render(h) {
    const rootDom = document.getElementById('app')
    return h(App,{
      props:{
        // 数值类型建议转成Number，避免传递字符串格式的数字
        myNumber: Number(rootDom.dataset.number),
        // 解析JSON字符串为对象再传递给组件
        myData: JSON.parse(rootDom.dataset.json)
      }
    })
  }
})

可选优化 #

如果JSON内容包含特殊字符（如单引号、尖括号、换行符等），可以提前对JSON字符串做encodeURIComponent编码后再放入HTML属性，JS侧读取后先解码再解析，兼容性更强：

// 读取属性后的处理逻辑
myData: JSON.parse(decodeURIComponent(rootDom.dataset.json))

内容的提问来源于stack exchange，提问作者Rain Man