伏龙阁资源网

vue3.0 加载json的方法（非ajax）
站长资源 2024/11/25 佚名
2 0

问题

加载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的资料请关注其它相关文章！

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接