vue3.0 加载json的“另类”方法(非ajax) 定义组件.vue文件
时间:2022-07-24
本文章向大家介绍vue3.0 加载json的“另类”方法(非ajax)
定义组件.vue文件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题
加载json一定要用ajax的方式吗?
最近学习vue3.0,在实现一个功能的时候发现一个问题—— 写代码的时候,需要的json太长、太多,和代码放在一起太混乱。看代码总有翻来翻去,又没有“折叠”功能。 那么能不能把json放在一个单独的文件里面保存,然后在加载进来呢?
查了半天的资料,发现那叫一个折腾呀,各种各样的配置不说,最后还需要用ajax的方式来加载。这个,这么简单的事情为啥要这么折腾?
你看引用组件是不是很方便?一行代码就搞定了。就像下面这样:
import nfInput from '@/components/nf-form-item.vue'
等等,组件??
思路
上面提到了组件,那么能不能把json放在组件里面保存,然后“页面”里加载组件获取组件里面的json呢?各种尝试之后发现是可以的,涉及几个关键字:
组件、属性、data、生命周期、$emit、watch
- 先定义一个组件,设置一个属性,这个属性不是接收数据的,而是返回json的一个桥梁。
- 然后在组件的data里面定义需要的json。
- 在组件的 created 事件里面通过 $emit 向父级提交data(json)数据
- 由于是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的规范,总之先这么用着,不行再改。
- (18) 为什么说继承是把双刃剑 / 计算机程序的思维逻辑
- 有效的python属性管理:描述符的使用
- (17) 继承实现的基本原理 / 计算机程序的思维逻辑
- (16) 继承的细节
- Python时间处理完全手册
- 计算机程序的思维逻辑 (15) - 初识继承和多态
- 前端自动化测试漫长路之——Selenium初探
- 计算机程序的思维逻辑 (14) - 类的组合
- webpack中tree-shaking技术介绍
- Python进行远程视频监控
- 好用的前端页面性能检测工具—sitespeed.io
- 计算机程序的思维逻辑 (13) - 类
- 新浪微博爬虫最新分享
- Unity Application Block 3月12 发布的版本
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 还在手写任务调度代码?试试这款可视化分布式调度框架!
- 3分钟搞定微信小程序类美团用户商家距离计算
- pytest封神之路第五步 参数化进阶
- 深入解读Vue修饰符sync
- 【深度知识】以太坊数据序列化RLP编码/解码原理
- Android 带伸缩动画的布局
- iOS 图像处理技术追踪-Core Image
- Android BottomSheetDialog使用实现底部拖动弹窗
- Android 滑动渐变背景Toolbar、点击置顶ScrollView
- Android 自定义View 画圆(奥运五环)
- Android 触摸屏交互之手势监听
- Android Glide加载网络图片不显示,但用网页打开又正常显示
- Android获取APP的版本号和版本名
- Android 在一个APP里打开另一个APP
- Android 自定义加载动画Dialog弹窗