在编写组件的时候,时刻考虑组件是否可复用是有好处的。一次性组件跟其他组件紧密耦合没关系,但是可复用组件一定要定义一个清晰的公开接口。
Vue.js组件 API 来自 三部分:prop、事件、slot:
- prop 允许外部环境传递数据给组件,在vue-cli工程中也可以使用vuex等传递数据。
- 事件允许组件触发外部环境的 action
- slot 允许外部环境将内容插入到组件的视图结构内。
代码示例:
<my-component :foo="bar" :bar="qux" //子组件调用父组件方法 @event-a="doThis" @event-b="doThat"> <!-- content --> <img slot="icon" src="..." /> <p slot="main-text">Hello!</p> </my-component>