>组件化开发的好处有很多，在实际开发中，几乎所有项目都会存在重复的页面以及逻辑，以往的解决办法，抽象出公共类去解决页面逻辑上的复用问题，但是页面仍需要 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> ` }) ```