问题

加载json一定要用ajax的方式吗?

最近学习vue3.0,在实现一个功能的时候发现一个问题——

写代码的时候,需要的json太长、太多,和代码放在一起太混乱。看代码总有翻来翻去,又没有“折叠”功能。

那么能不能把json放在一个单独的文件里面保存,然后在加载进来呢?

查了半天的资料,发现那叫一个折腾呀,各种各样的配置不说,最后还需要用ajax的方式来加载。这个,这么简单的事情为啥要这么折腾?

你看引用组件是不是很方便?一行代码就搞定了。就像下面这样:

import nfInput from '@/components/nf-form-item.vue'

等等,组件??

思路

上面提到了组件,那么能不能把json放在组件里面保存,然后“页面”里加载组件获取组件里面的json呢?各种尝试之后发现是可以的,涉及几个关键字:

组件、属性、data、生命周期、$emit、watch

  1. 先定义一个组件,设置一个属性,这个属性不是接收数据的,而是返回json的一个桥梁。
  2. 然后在组件的data里面定义需要的json。
  3. 在组件的 created 事件里面通过 $emit 向父级提交data(json)数据
  4. 由于是setup先执行,组件的created后执行,所以需要在setup里面设置watch监听属性的变化,得到需要的json后赋值给需要的对象。

当然,json可以直接写在created里面,不过还是感觉放在data里面更适合一些。

解决

定义组件

  1. <template>
  2. <span :value="modelValue"></span> <!--使用span-->
  3. </template>
  4. <script>
  5. export default {
  6. name: 'nf-getjson',
  7. props: {
  8. modelValue: Object // 属性名称需要写modelValue 方便一些
  9. },
  10. data: function () {
  11. return { //需要的json
  12. json: {
  13. controlId: 101,
  14. controlType: 100,
  15. colName: 'abc',
  16. isClear: true,
  17. disabled: false,
  18. required: true,
  19. class: '1',
  20. title: '1',
  21. rows: 5,
  22. cols: 50,
  23. placeholder: '请输入',
  24. readonly: false
  25. }
  26. }
  27. },
  28. created: function () {
  29. this.$emit('update:modelValue', this.json) // 返回给调用者,vue3.0的改变的地方
  30. }
  31. }
  32. </script>

.vue文件

  1. <template>
  2. <nfJosn v-model="title" /> <!--就是那个传说中的组件,使用v-model 传递数据-->
  3. </template>
  4. <script>
  5. import { ref, watch } from 'vue' // 需要watch进行监听
  6. import nfJosn from '@/components/nf-getjson.vue' // 加载组件
  7. export default {
  8. name: 'FormHelp',
  9. components: {
  10. nfHelp
  11. },
  12. setup () {
  13. const value = ref('') // 定义一个属性
  14. const json = ref({}) // 接收返回的json
  15. // 监听属性变化
  16. watch(() => value.value, json => {
  17. json.value = json
  18. })
  19. return {
  20. value,
  21. json
  22. }
  23. }
  24. }
  25. </script>

基本就是这样,不需要加事件。

小结

以上代码在vue3.0 beta版里测试通过。

也不知道有没有人用过这种方式,也不知道这种方式是否符合vue的规范,总之先这么用着,不行再改。

vue3.0 加载json的“另类”方法(非ajax)的更多相关文章

  1. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  2. angular-translate加载.json文件进行翻译

    这是这个demo的目录结构,总共有两个文件:locale-chinese.json和translation11.html locale-chinese.json文件的内容是: { "beau ...

  3. 判断 iframe 是否加载完成的完美方法

    一般来说,我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似:var iframe = document.createElement(" ...

  4. dojo 加载Json数据

    1.今天研究了dojo datagrid加载WebService后台传上来的数据.研究来研究去发现他不是很难.用谷歌多调试一下就好了. 2.看很多例子,这个例子能够更好的帮我解决问题:https:// ...

  5. OpenLayers学习笔记(十)— 动态加载JSON数据模拟航迹线

    在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...

  6. 异步加载js文件的方法总结

    方法一,jQuery.getScript HTML 代码: 代码如下 复制代码 <button id="go">Run</button><div cl ...

  7. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  8. 扩展JQUERY 表单加载JSON数据

    $.fn.extend({ //表单加载json对象数据 setForm : function (jsonValue) { var obj = this; $.each(jsonValue, func ...

  9. c#动态加载卸载DLL的方法

    这篇文章介绍了c#动态加载卸载DLL的方法,有需要的朋友可以参考一下 c#中通过反射可以方便的动态加载dll程序集,但是如果你需要对dll进行更新,却发现.net类库没有提供卸载dll程序集的方法.在 ...

随机推荐

  1. mogilefs 安装与配置

    安装步骤 配置yum 的epel源 yum install perl-Sys-Syslog perl-IO-AIO perl-Net-Netmask -y # 安装依赖的包 取得mogilefs的rp ...

  2. 基于OpenSIPS做注册服务下,场景A打B,一方发起BYE挂断后收到500,另一方无法挂断的问题

    基于OpenSIPS做注册服务下,场景A打B,一方发起BYE挂断后收到500,另一方无法挂断的问题     最近在工作中遇到一个看似很奇怪的,排除起来很费劲,但最后的解决方式又及其简单的问题,下面我们 ...

  3. 你真的理解索引吗?从数据结构层面解析mysql索引原理

    从<mysql存储引擎InnoDB详解,从底层看清InnoDB数据结构>中,我们已经知道了数据页内各个记录是按主键正序排列并组成了一个单向链表的,并且各个数据页之间形成了双向链表.在数据页 ...

  4. 解决@ResponseBody不能和 <mvc:annotation-driven>同时使用的问题

    我们都知道使用Springmvc的ajax很强大只要三步就可以实现: 1.引入jackson的maven到pom文件: <dependency> <groupId>com.fa ...

  5. MySQL执行文件中的SQL

    连接进入MySQL服务, 使用source ${文件名}执行. 末尾不能带分号.

  6. Tensorflow Cpu不支持AVX

    Tensorflow从1.6开始从AVX编译二进制文件,所以如果你的CPU不支持AVX 你需要 从源码编译 下载旧版 从源码编译比较麻烦,如果你是初学的话,我建议使用旧版. 安装旧版: pip3 in ...

  7. 【接口自动化】Python+Requests接口自动化测试框架搭建【二】

    接续前文,在上篇博客中我们编写了demo.py代码,里面代码过多冗余,更新代码: #!/usr/bin/env python # coding=utf-8 import requests class ...

  8. linux 修改 mac

    ifconfig eth0 hw ether fa::3d:c3:: 或 ip link set dev eth0 address fa::3d:c3::

  9. 第五篇 Scrum冲刺博客

    一.会议图片 二.项目进展 成员 完成情况 今日任务 冯荣新 未完成 购物车列表,购物车工具栏 陈泽佳 未完成 静态结构 徐伟浩 商品信息录入 协助前端获取数据 谢佳余 未完成 搜索算法设计 邓帆涛 ...

  10. Mac本软件安装之后打不开的解决办法

    Mac本软件安装之后打不开的解决办法 MacOS系统版本10.15.3 一,安装Axure RP 9 问题:安装之后打不开 提示“Axure RP 9已损坏,无法打开”或“打不开 Axure RP 9 ...