vue-單向資料流
阿新 • • 發佈：2020-08-13
單向資料流
Prop 是單向繫結的：當父元件的屬性變化時，將傳遞給子元件，但是反過來不會。這是為了防止子元件無意間修改了父元件的狀態，來避免應用的資料流變得難以理解。
另外，每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。如果你這麼做了，Vue 會在控制檯給出警告。
注意在 JavaScript 中物件和陣列是引用型別，指向同一個記憶體空間，如果 prop 是一個物件或陣列，在子元件內部改變它會影響父元件的狀態。 message:{val:""}
<body> <div id="app"> <father></father> </div> <template id="father"> <div> <input type="text" v-model="msg.value"> <hr> <son :msg="msg"></son> </div> </template> <template id="son"> <div> <input type="text" v-model="msg.value"> </div> </template> </body> <script> Vue.component("father",{ template:"#father", data(){ return { msg:{ //父元件可以將msg這個地址引用傳遞子元件，此時，子元件修改資料，父元件也跟著修改 value:"father" } } }, components:{ son:{ props:["msg"], template:"#son" } } }) new Vue({ el:"#app" }) </script>
元件間的資料呼叫
元件、例項物件上有這樣的屬性：$parent,$children,$root,
這樣的話，就形成了viewmodel鏈(關係鏈)，
理論上來說，任何兩個元件之間的資料都可以互相呼叫，獲取
缺點：如果元件很多的話，寫出來的程式碼會很亂
<body> <div id="app"> <aaa></aaa> </div> <!--建立元件a--> <template id="aaa"> <div> <p>這是A元件...</p> <input type="text" v-model="msg"> <hr> <bbb :msg="msg"></bbb> </div> </template> <!--建立元件b--> <template id="bbb"> <div> <input type="text" v-model="ownMsg"> </div> </template> </body> <script> Vue.component("aaa",{ template:"#aaa", data(){ return { msg:"hello" } } }) Vue.component("bbb",{ template:"#bbb", props:["msg"], computed:{ ownMsg:{ get(){ return this.msg }, set(val){ //希望父元件aaa的msg變成val // this.msg = val this.$parent.msg = val } } } }) var vm = new Vue({ el:"#app" }) </script>
v-model 可以用在元件通訊？
可以的。在元件上面使用v-model指令，相當於綁定了value屬性與監聽input事件。