无真实JSON API时VueJS最佳实践：HTML中JSON字符串处理与子组件传值

嘿，Mikel！我来给你分享几种在Vue项目里处理这种场景的靠谱方案，都是实际开发中常用的最佳实践👇

方案一：父组件解析后通过Props传递（最常用、最清晰） #

这是最直观的做法，先在根组件把CMS输出的JSON字符串解析成JS对象，再通过props传给子组件，逻辑清晰还容易维护。

实现步骤： #

1. 根组件模板：

<div id="app">
  <!-- 直接传递解析后的对象，不用在模板里写函数调用 -->
  <application :apidata="parsedData"></application>
</div>

2. 根组件JS逻辑：

new Vue({
  el: '#app',
  data() {
    return {
      // 拿到CMS输出的合法JSON字符串
      rawJson: myRenderedJsonString,
      parsedData: null
    }
  },
  created() {
    // 必须加错误捕获，防止JSON格式异常导致页面崩溃
    try {
      this.parsedData = JSON.parse(this.rawJson);
    } catch (err) {
      console.error('JSON解析出错啦:', err);
      // 设置默认空对象，避免子组件报错
      this.parsedData = {};
    }
  }
})

3. 子组件接收并使用：

Vue.component('application', {
  // 可以给props加类型校验，增强健壮性
  props: {
    apidata: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  template: '<div>{{ apidata.someField }}</div>'
})

方案二：用Provide/Inject传递（适合多层组件嵌套场景） #

如果你的application组件嵌套在多层子组件里，不想一层一层手动传props，可以用Vue的provide/inject特性，把解析后的数据全局注入到子组件树中。

实现步骤： #

1. 根组件提供数据：

new Vue({
  el: '#app',
  data() {
    return { parsedData: null }
  },
  created() {
    try {
      this.parsedData = JSON.parse(myRenderedJsonString);
    } catch (err) {
      console.error('JSON解析失败:', err);
      this.parsedData = {};
    }
  },
  // 把解析后的数据提供给所有子组件
  provide() {
    return {
      appInitialData: this.parsedData
    }
  }
})

2. 子组件注入并使用：

Vue.component('application', {
  // 注入根组件提供的数据
  inject: ['appInitialData'],
  template: '<div>{{ appInitialData.someField }}</div>'
})

方案三：挂载到Window全局变量（简单但需注意全局污染） #

如果CMS支持把JSON字符串输出为全局变量，这种方式最省事，但要注意避免全局变量名冲突。

实现步骤： #

1. CMS输出全局变量：

<!-- 在Vue加载前，让CMS输出这段脚本 -->
<script>
window.appInitialRawData = myRenderedJsonString;
</script>

2. Vue组件中读取并解析：

new Vue({
  el: '#app',
  data() {
    let parsedData = {};
    try {
      parsedData = JSON.parse(window.appInitialRawData);
    } catch (err) {
      console.error('JSON解析出错:', err);
    }
    return { parsedData }
  },
  template: '<application :apidata="parsedData"></application>'
})

关键注意事项 #

• 必须加错误捕获：哪怕CMS保证输出合法JSON，也可能出现转义错误、字符编码问题，try/catch能避免页面直接崩溃
• JSON转义要正确：CMS输出JSON字符串时，要确保引号、换行符等特殊字符已经正确转义，否则JSON.parse会失败
• Props类型校验：子组件接收数据时，最好添加类型和必填校验，提前发现数据异常

内容的提问来源于stack exchange，提问作者Mikel Wohlschlegel