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

【例1】

<div id="app">father:<button @click="count++">{{ count }}</button><son-cmp :count='count'></son-cmp> </div> Vue.component('son-cmp', {props: ['count'],template: `<div>son:<button @click="count++">{{ count }}</button></div>` }) const vm = new Vue({el: '#app',data: {count: 0} })

?

【注】常見試圖改變prop的情況

1. 用 prop 來傳遞一個初始值

這個子組件接下來希望將其作為一個本地的prop數(shù)據(jù)來使用，在后續(xù)操作中，會將這個值進行改變。在這種情況下，最好定義一個本地的data屬性，并將這個prop用作其初始值

Vue.component('son-cmp', {props: ['count'],data() {return {myCount: 0}},template: `<div>son:<button @click="myCount++">{{ myCount }}</button></div>` }) const vm = new Vue({el: '#app',data: {count: 0} })

2. prop作為原始值傳入且需要進行轉(zhuǎn)換

在這種情況下，最好使用這個prop的值來定義一個計算屬性

Vue.component('son-cmp', {props: ['count'],computed: {myCount() {return this.count + '萬'}},template: `<div>son:<button>{{ myCount }}</button></div> ` }) const vm = new Vue({el: '#app',data: {count: 0} })

總結(jié)

以上是生活随笔為你收集整理的vue_prop单向数据流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。