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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 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中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php实现图片压缩处理
2020/09/09 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
点击文章内容处弹出页面代码
2009/10/01 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue小白入门教程
2018/04/02 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python字典改变value值方法总结
2019/06/21 Python
Django组件content-type使用方法详解
2019/07/19 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
行政处罚告知书
2015/07/01 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL