99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

本篇文章為大家展示了vue中怎么自定義組件傳值，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

10年積累的成都做網站、成都網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站策劃后付款的網站建設流程，更有瓊中黎族免費網站建設讓你可以放心的選擇與我們合作。

自定義組件傳值

常規(guī)prop-event

父組件

 address = val" key="4">

子組件

需要注意：不要直接在子組件內操作父組件的內容

組件實例的作用域是孤立的。每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數(shù)據(jù)。如果你這么做了，Vue 會在控制臺給出警告。

export default {
 name: 'prop-event',
 props: ['address'],
 watch: {
 address(newVal) {
  this.$emit('update', newVal)
 }
 }
}

如將上述代碼替換子組件，內容會報錯！

修飾符.sync

父組件

子組件

prop-update:[prop]語法糖，與prop-event對比的優(yōu)勢：父組件無需監(jiān)聽事件@update="val => address = val"，自動監(jiān)聽update:[prop]事件。

雙向數(shù)據(jù)綁定v-model

所以要讓組件的 v-model 生效，它應該 (從 2.2.0 起是可配置的)：

接受一個 value prop

在有新的值時觸發(fā) input 事件并將新值作為參數(shù)

父組件

子組件

prop-input語法糖，父組件v-model默認監(jiān)聽input事件

需要注意，這里必須觸發(fā)input事件，當然也可以自定v-model屬性值和事件，請參照自定義組件的v-model

vuex

通過store傳值，這里后續(xù)單獨講述vuex。

單向數(shù)據(jù)流

上述已經提及，在子組件內部改變 prop，Vue會在控制臺給出告警。但經常開發(fā)周靜，我們很容易忍不住修改prop中的數(shù)據(jù)，如：

Prop 作為初始值傳入后，子組件想把它當作局部數(shù)據(jù)來用；

Prop 作為原始數(shù)據(jù)傳入，由子組件處理成其它數(shù)據(jù)輸出。

對這兩種情況，正確的應對方式是：

問題1：定義一個局部變量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

問題2：定義一個計算屬性，處理 prop 的值并返回：

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

上述內容就是vue中怎么自定義組件傳值，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享名稱：vue中怎么自定義組件傳值-創(chuàng)新互聯(lián)
分享路徑：http://www.ef60e0e.cn/article/esehi.html