自定義屬性并獲得屬性的值

例如

data-radius語法： data-屬性

vue:

<div @mouseover='changeRadius($event)' @mouseout='changeRadius(false)' @click='setlocation($event)'>
? ? ? ? ? <div data-radius='100'>100m</div>
? ? ? ? ? <div data-radius='300'>300m</div>
? ? ? ? ? <div data-radius='500'>500m</div>
? ? ? ? ? <div data-radius='1000'>1000m</div>
</div>

獲取屬性的值：ev.target.dataset.radius

methods:

setlocation:function(ev){
? ? this.dispradius = ev.target.dataset.radius + '米'
}

對自定義屬性--props的理解

由于最近學(xué)習(xí)完vue在做項目，但是在跟做項目時，發(fā)現(xiàn)一個問題就是props自定義屬性出現(xiàn)了可以讀也可以寫，并且數(shù)據(jù)流向成了雙向的問題。

初始props

在剛剛學(xué)習(xí)的時候，對于props的了解是只能讀不能寫,并且同時它還是作為組件之間值傳遞的工具，父組件對子組件單向數(shù)據(jù)流動

問題的出現(xiàn)

此處放代碼：

在頁面中用vue去查數(shù)據(jù)的確發(fā)生了數(shù)據(jù)的更改

但是在跟做別人的項目時，發(fā)現(xiàn)父組件和子組件中數(shù)據(jù)出現(xiàn)了雙向流動，并且eslint規(guī)范報了錯誤，今天查閱props文檔的時候，原文如下：

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

發(fā)現(xiàn)props數(shù)據(jù)單向流動并不是固定死的，它是通常情況下都是單向流動，但是它在數(shù)據(jù)為對象和數(shù)組時，是可以發(fā)生雙向流動

為什么會發(fā)生雙向流動的問題？

原因：注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變變更這個對象或數(shù)組本身將會影響到父組件的狀態(tài)。

總結(jié)：

1、為了規(guī)范自己的代碼書寫，以后將保證當(dāng)要這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用時，將其存儲到data數(shù)據(jù)中，data的數(shù)據(jù)是可讀寫的

2、對于雙向流動的問題，不去直接修改props的值，當(dāng)父組件在需要子組件的值時，再進行子向父傳值（此處還有一個問題，隨后補充）

補充問題

前面說到props自定義屬性不能寫，其實是為了限制數(shù)據(jù)流向混亂，因此只讀不寫，所以這里數(shù)組和對象是可以寫的。

代碼證明：

      this.tableData = this.tableData.filter((item, index) => index !== i)
      const id = this.tableData[i].id

但是最后為了規(guī)范，還是將數(shù)據(jù)存到了data，進行了代碼修改。而且也出現(xiàn)了數(shù)據(jù)異步的問題（已經(jīng)解決在后面的文章）。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論