vue接收json資料 Vue 元件之間的資料通訊

2021-10-13 21:41:20 字數 1218 閱讀 8223

父對子:prop傳遞資料

子對父:$emit觸發自定義事件

注意:在子元件內部不能對父元件傳進來的資料進行修改(如下報錯),一般用prop接收,或者computed返回給新屬性,

1>.引用資料型別

如果父元件傳遞給子元件的是乙個引用型別的資料,在子元件內部對資料來源進行修改的時候,父元件會同步修改。

為了避免同步修改,需要對其進行深複製

props:['obj'],

data()

}

2>.自定義事件

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結:父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態,從而導致你的應用的資料流向難以理解。(引用型別除外)
在某些特殊情況下,如果想要父元件接受某種情況的值同步,這時候便需要自定義事件。

父:

data:,

methods:}子:

props:['title'],

data()},

created(),5000)

}

引用型別中,如果只需要某些屬性需要告知父元件,可同時採用 深複製和自定義事件

通過兩對父子通訊:爺爸之間,爸兒之間。

new vue() 作為eventbus:

vue.prototype.$eventhub = new vue(); //

...

兄:data:,

created())

}...

弟:props:['title'],

data()},

created(),5000)}

全域性通訊可控制父子通訊,爺孫通訊,兄弟通訊

有時只進行簡單的資料雙向控制,而不做其他操作,這裡vue提供乙個修飾符.sync。

父:

子:props:['title'],

created(),5000)

}

這裡注意點在於 .sync 和 update:title, 可見sync是乙個語法糖,省略了在父元件傳遞自定義事件的步驟。

prop

vue接收json資料 VUE獲取JSON資料問題

我想用vue獲取json中的conversation陣列中最後一項中的content的資料,但是我的方法渲染失敗了,求解。json資料部分 如果換成 則瀏覽器顯示最後乙個物件的 speaker a content 說的不錯 script部分 import axios from axios expor...

vue中ajax傳送接收json總結

系統結構 後端 python中tornado 前端 vue.js 主要問題 跨域問題和json收發 1 跨域問題 python中tornado中設定 後端 1 實現options方法 2 設定相關允許的頭域 def set default headers self print setting hea...

Vue中使用本地json資料

專案中有有乙個地區介面,伺服器原因請求速度很慢很慢,於是考慮將地區介面的資料設定為本地的json檔案。大大提公升請求速度 一 首先建立乙個json檔案,將資料放進去,一定要確保格式正確我的是這樣的,把json檔案放在static資料夾下,放到static資料夾下 二 像使用axios一樣去呼叫jso...