vue3.0 加載json的方法（非ajax）

問題

加載json一定要用ajax的方式嗎？

最近學習vue3.0，在實現一個功能的時候發現一個問題——寫代碼的時候，需要的json太長、太多，和代碼放在一起太混亂?？创a總有翻來翻去，又沒有“折疊”功能。那么能不能把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的規范，總之先這么用著，不行再改。

以上就是vue3.0 加載json的方法（非ajax）的詳細內容，更多關于vue3.0 加載json的資料請關注好吧啦網其它相關文章！