前端组件化

用户头像
韩向民
关注
发布于: 1 小时前

前端研发从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"传入内部组件

用户头像

韩向民

关注

还未添加个人签名 2018.11.15 加入

还未添加个人简介

评论

发布
暂无评论
前端组件化