>組件化開發的好處有很多，在實際開發中，幾乎所有項目都會存在重復的頁面以及邏輯，以往的解決辦法，抽象出公共類去解決頁面邏輯上的復用問題，但是頁面仍需要 copy paste,在工程化的單頁中可以簡單理解為每個頁面 都是一個獨立的組件，頁面的復用更為簡單。 **簡單講一下組件之間的幾種關系與通信方式** 1.兄弟組件：使用 eventbus 的 on,emit 進行監聽與觸發傳值時間 2.父子組件：子組件使用 props ，接收父組件綁定在組件標簽上的值 3.嵌套組件：比如 調用關系為A>B>C組件，需要 A 傳值到 C 組件，此時通過 props會相當麻煩，且存在更深的嵌套關系時，props的方案將會變得不可取，此時 可通過 Vue2.4+提供的 $attrs 與 $listeners 解決 或者 父組件中通過provider來需要傳遞的值，然后在子組件中通過inject來注入的方式。 4.組件邏輯過于復雜：如果過多組件存在相互依賴關系，可使用 vuex 對公共需要的數據進行解耦操作。 這幾天遇到一個問題 父組件的值需要綁定在子組件的 input 上，但是 Vue 是單項數據流的禁止子組件修改從父組件傳遞過來的值，此時如果直接綁定Vue 會警告，可以通過下面示例的方法解決 ```javascript Vue.component('child',{ props:{ value:String, //v-model會自動傳遞一個字段為value的prop屬性 }, data(){ return { mymessage:this.value //初始化 props 傳過來的值 } }, methods:{ changeValue(){ //觸發綁定事件，使父組件自身修改該字段 this.$emit('input',this.mymessage） } }, template:` <div> <input type="text" v-model="mymessage" @change="changeValue"> </div> }) Vue.component('parent',{ template:` <div> <p>this is parent compoent!</p> <p>{{message}}</p> <child v-model="message"></child> </div> `, data(){ return { message:'hello' } } }) var app=new Vue({ el:'#app', template:` <div> <parent></parent> </div> ` }) ```