前端组件化

前端研发从jQuery/EasyUI 到Angular/Extjs等，应用的规模化后，要兼顾效率和重用性。前端框架不断地出现React/Vuejs。



组件通信

了解组件的通信，先分析组件间的关系。可以是父子、兄弟、等待。

组件开发时用到props/emit/on/event bus/vuex

边界情况是 $parent/$children/$root/$refs/provide/inject

非prop特性 $attr/$listeners



在业务开发的任务中尽量保持独立，减少依赖。

在框架的开发中使用的上述的一些方法。



父子间传递：

// child

props： {msg：string}



// parent

<HelloWorld msg="Helloe World"/>



// child

this.$emit("add", good)



跨层级传参的方式

事件总线，在任意两个组件之间传递



父组件中引用原生的元素可以使用refs



// parent

<HelloWorld ref="hw"/>



mounted() {

this.$refs.hw.xx = 'xxx'

}

$children 与$refs 的区别是不能保证子元素的顺序



attrs/listeners 包含了父作用域中不作为prop被识别的（且获取）的特性绑定（class style除外）。可以通过v-bind="$attrs"传入内部组件