问题

加载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. java_内部类、匿名内部类的使用

    内部类 将一个类A定义在另一个类B里面,里面的那个类A就称为内部类,B则称为外部类. 内部类的分类 成员内部类,类定义在了成员位置 (类中方法外称为成员位置) 局部内部类,类定义在方法内 成员内部类 ...

  2. 数据源管理 | 分布式NoSQL系统,Cassandra集群管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.Cassandra简介 1.基础描述 Cassandra是一套开源分布式NoSQL数据库系统.它最初由Facebook开发,用于储存收件箱 ...

  3. 汇编 | x86汇编指令集大全(带注释)

    做mit-6.828的时候遇到了很多汇编知识,但是无奈学校还没学汇编,只能狠心啃啃硬骨头,在网上查到了很多的资料,归档!方便查看 ----------------------------------- ...

  4. Python 3.x pip安装报错ERROR: No matching distribution found for PIL

    安装完成即可解决无法引入PIL的问题.

  5. Jdk1.6 HTTPS访问问题解决办法

    真是艹蛋的一次经历,jdk6上面去访问别人的https,还好有百度搞定了问题.现在写下随笔,记录下; 首先要自己重写SSLSocketFactory这个类, 下面是自己重写的这个类:TLSSocket ...

  6. 【ZJOI 2008】 树的统计 - 树链剖分

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  7. 第6章 运行Spark SQL CLI

    第6章 运行Spark SQL CLI Spark SQL CLI可以很方便的在本地运行Hive元数据服务以及从命令行执行查询任务.需要注意的是,Spark SQL CLI不能与Thrift JDBC ...

  8. Python 为什么没有 void 关键字?

    void 是编程语言中最常见的关键字之一,从字面上理解,它是"空的.空集.空白"的意思,最常用于 表示函数的一种返回值类型. 维基百科上有一个定义: The void type, ...

  9. Shell编程—结构化命令(2)

    1for命令 for命令的基本格式: for var in list do commands done 在list参数中,你需要提供迭代中要用到的一系列值. 1.1读取列表中的值 例子: $ vim ...

  10. muduo源码解析11-logger类

    logger: class logger { }; 在说这个logger类之前,先看1个关键的内部类 Impl private: //logger内部数据实现类Impl,内部含有以下成员变量 //时间 ...