在业务中我们常常需要将一些大的页面的公共部分抽离出来，实现组件的复用，便于维护和代码解耦。然而怎样做、怎么做，需要下功夫去仔细商讨。以下是我总结的一些方法，仅代表我的个人观点。
1.可复用部分可以选择直接写死，组件在标签中绑定的属性可以在父组件中通过v-bind单项数据流传过来。
2.不可复用部分可通过动态配置，比如最简单的通过v-if来控制展示，然后通过在该组件中绑定一个属性来匹配需要展示的部分，当然这种方式的代码量比较多，可扩展性也比较弱。若以后想出更好的方法，再记录。
3.不要在组件内部实现过多的业务逻辑，而是应当以一种接口的形式去让调用它的父组件去实现这些方法。例如我们可以在组建内部通过emit向父组件注册同名方法或其他方法，然后去让父组件去触发这个事件来实现相应的方法，这一步很重要。如果组件内部业务逻辑过多，那么他就不是一款基础组件了，而且这样做也会使组件的功能变得单一，不好扩展和维护。
4.组件自己需要调用的网络请求来获取他自己的数据是可以的，并且它的一些自己的控制逻辑方法可以交给他自己处理，不用给外部处理。
5.由外部来控制组件内部状态的属性可以单项数据流，也就是说只由父组件进行初始化工作，不需要回传控制的话，比如command + f在父组件中全局查找该属性，发现只有在v-bind上可以找到并且该属性的变化不依赖于子组件内部，那么就不需要在子组件的data中初始化。如果父组件中的业务逻辑会再次使用到该属性，并且该属性会在子组件内部发生变化，则需要在子组件的data中初始化，并且以props中的参数来初始化，注意名字不要重复。然后通过emit向父组件注册事件来回传参数，也可以在某些地方使用v-model语法糖。(其实说白了就是看父组件给子组件传进去的属性是否会在子组件内被子组件改动，如果会改动的话，就需要子组件抛出去，不需要的话就单项数据流)
总结：组件内部不要实现太多的业务逻辑，具体业务逻辑交给调用他的父组件去实现。组件内部标签需要的属性通过父子组件传值，并且在组件内部data中初始化（如果需要数据双向绑定），如果父组件需要这些数据，可以通过向父组件注册方法来实现。可以把组件想成一个代理中心，在组件里面注册方法供外部调用，将UI层复用，将业务层桥接。
网友评论