请选择 进入手机版 | 继续访问电脑版
创作

#楼主# 2020-9-8

跳转到指定楼层
本帖最后由 大前端晨曦 于 2020-9-8 13:57 编辑

timg (1).jpg

问题


加载json一定要用ajax的方式吗?


最近学习vue3.0,在实现一个功能的时候发现一个问题——


写代码的时候,需要的json太长、太多,和代码放在一起太混乱。看代码总有翻来翻去,又没有“折叠”功能。


那么能不能把json放在一个单独的文件里面保存,然后在加载进来呢?


查了半天的资料,发现那叫一个折腾呀,各种各样的配置不说,最后还需要用ajax的方式来加载。这个,这么简单的事情为啥要这么折腾?


你看引用组件是不是很方便?一行代码就搞定了。就像下面这样:


  1. import nfInput from <font color="#c41a16">'@/components/nf-form-item.vue'</font>
复制代码


等等,组件??


思路

上面提到了组件,那么能不能把json放在组件里面保存,然后“页面”里加载组件获取组件里面的json呢?各种尝试之后发现是可以的,涉及几个关键字:


组件、属性、data、生命周期、$emit、watch

  • 先定义一个组件,设置一个属性,这个属性不是接收数据的,而是返回json的一个桥梁。
  • 然后在组件的data里面定义需要的json。
  • 在组件的 created 事件里面通过 $emit 向父级提交data(json)数据
  • 由于是setup先执行,组件的created后执行,所以需要在setup里面设置watch监听属性的变化,得到需要的json后赋值给需要的对象。


当然,json可以直接写在created里面,不过还是感觉放在data里面更适合一些。


解决



定义组件
  1. <div>
  2. </div><div><template></div><div>  <span :value=<font color="#c41a16">"modelValue"</font>></span> <!--使用span-->
  3. </template>

  4. <script>

  5. <font color="#5c2699">export</font> default {
  6.   name: <font color="#c41a16">'nf-getjson'</font>,
  7.   props: {
  8.     modelValue: Object  // 属性名称需要写modelValue 方便一些
  9.   },
  10.   data: function () {
  11.     <font color="#5c2699">return</font> {  //需要的json
  12.       json: {
  13.         controlId: 101,
  14.         controlType: 100,
  15.         colName: <font color="#c41a16">'abc'</font>,
  16.         isClear: <font color="#aa0d91">true</font>,
  17.         disabled: <font color="#aa0d91">false</font>,
  18.         required: <font color="#aa0d91">true</font>,
  19.         class: <font color="#c41a16">'1'</font>,
  20.         title: <font color="#c41a16">'1'</font>,
  21.         rows: 5,
  22.         cols: 50,
  23.         placeholder: <font color="#c41a16">'请输入'</font>,
  24.         <font color="#5c2699">readonly</font>: <font color="#aa0d91">false</font>
  25.       }
  26.     }
  27.   },
  28.   created: function () {
  29.     this.<font color="#3F6E74">$emit</font>(<font color="#c41a16">'update:modelValue'</font>, this.json) // 返回给调用者,vue3.0的改变的地方
  30.   }
  31. }
  32. </script></div>
复制代码


.vue文件

  1. <template>
  2.   <nfJosn v-model=<font color="#c41a16">"title"</font> /> <!--就是那个传说中的组件,使用v-model 传递数据-->
  3. </template>

  4. <script>
  5. import { ref, watch } from <font color="#c41a16">'vue'</font>  // 需要watch进行监听
  6. import nfJosn from <font color="#c41a16">'@/components/nf-getjson.vue'</font>  // 加载组件

  7. <font color="#5c2699">export</font> default {
  8.   name: <font color="#c41a16">'FormHelp'</font>,
  9.   components: {
  10.     nfHelp
  11.   },
  12.   setup () {
  13.     const value = ref(<font color="#c41a16">''</font>)  // 定义一个属性
  14.     const json = ref({})  // 接收返回的json
  15.     // 监听属性变化
  16.     watch(() => value.value, json => {
  17.       json.value = json
  18.     })

  19.     <font color="#5c2699">return</font> {
  20.       value,
  21.       json
  22.     }
  23.   }
  24. }
  25. </script>
复制代码

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


小结以上代码在vue3.0 beta版里测试通过。


也不知道有没有人用过这种方式,也不知道这种方式是否符合vue的规范,总之先这么用着,不行再改。




转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部