vue3.0 加载json的方法(非ajax)


Posted in Javascript onOctober 26, 2020

问题

加载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里面更适合一些。

解决

定义组件

<template>
 <span :value="modelValue"></span> <!--使用span-->
</template>

<script>

export default {
 name: 'nf-getjson',
 props: {
  modelValue: Object // 属性名称需要写modelValue 方便一些
 },
 data: function () {
  return { //需要的json
   json: {
    controlId: 101,
    controlType: 100,
    colName: 'abc',
    isClear: true,
    disabled: false,
    required: true,
    class: '1',
    title: '1',
    rows: 5,
    cols: 50,
    placeholder: '请输入',
    readonly: false
   }
  }
 },
 created: function () {
  this.$emit('update:modelValue', this.json) // 返回给调用者,vue3.0的改变的地方
 }
}
</script>

.vue文件

<template>
 <nfJosn v-model="title" /> <!--就是那个传说中的组件,使用v-model 传递数据-->
</template>

<script>
import { ref, watch } from 'vue' // 需要watch进行监听
import nfJosn from '@/components/nf-getjson.vue' // 加载组件

export default {
 name: 'FormHelp',
 components: {
  nfHelp
 },
 setup () {
  const value = ref('') // 定义一个属性
  const json = ref({}) // 接收返回的json
  // 监听属性变化
  watch(() => value.value, json => {
   json.value = json
  })

  return {
   value,
   json
  }
 }
}
</script>

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

小结

以上代码在vue3.0 beta版里测试通过。
也不知道有没有人用过这种方式,也不知道这种方式是否符合vue的规范,总之先这么用着,不行再改。

以上就是vue3.0 加载json的方法(非ajax)的详细内容,更多关于vue3.0 加载json的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
AngularJS Controller作用域
Jan 09 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
vue render函数动态加载img的src路径操作
Oct 26 #Javascript
You might like
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
vue+iview写个弹框的示例代码
2017/12/05 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
python实现用户管理系统
2018/01/10 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python模块常用用法实例详解
2019/10/17 Python
使用python模拟高斯分布例子
2019/12/09 Python
Django框架请求生命周期实现原理
2020/11/13 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
班级寄语大全
2014/04/10 职场文书
教师评语大全
2014/04/28 职场文书
企业授权委托书范本
2014/09/22 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
python3实现无权最短路径的方法
2021/05/12 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python