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

例如

data-radius語(yǔ)法： 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 + '米'
}

對(duì)自定義屬性--props的理解

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

初始props

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

問(wèn)題的出現(xiàn)

此處放代碼：

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

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

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

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

為什么會(huì)發(fā)生雙向流動(dòng)的問(wèn)題？

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

總結(jié)：

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

2、對(duì)于雙向流動(dòng)的問(wèn)題，不去直接修改props的值，當(dāng)父組件在需要子組件的值時(shí)，再進(jìn)行子向父?jìng)髦担ù颂庍€有一個(gè)問(wèn)題，隨后補(bǔ)充）

補(bǔ)充問(wèn)題

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

代碼證明：

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

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

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

最新評(píng)論