前端组件化开发，已经有多年的历史了，不管是服务端渲染，还是前端SPA，都有了比较成熟的组件化开发的方案。 随着组件化开发的普及，前端社区中贡献了很多不错的前端组件，都提供开箱即用的方案，使得更好的发挥组件化的优势。
什么是前端组件化开发
组件化开发的优点
怎么设计一个组件
专一
可配置性
// title.jsx (Title组件)
import React, { Component, PropTypes } from 'react';
export default class Title extends Component {
constructor(props) {
super(props);
}
static propTypes = {
title: PropTypes.string.isRequired
}
render() {
const { title } = this.props;
return (
<p>{ title }</p>
)
}
}
// title.vue (Title组件)
<template>
<p>{{ title }}</p>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
}
}
}
</script>
// ES6 语法
changeTitle(title) {
if (typeof title !== 'string') {
throw new Error('必须传入一个 title，才能修改 title。')
}
// 满足条件，可以进行修改
this.title = title // vue 语法
this.setState({ // react 语法，修改state的值
title
})
} //在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
Vue.component('child-component', {
methods: {
emitEvent() {
this.$emit('event1', 'This is a event.')
}
},
mounted() {
this.emitEvent()
}
}) //在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
<template>
<div>
<child-component @event1="eventHandler" />
</div>
</template>
<script>
import childComponent from './child-component'
export default {
components: {
childComponent
},
methods: {
eventHandler(event) {
console.log(event)
}
}
}
</script>
class ChildComponent extends React.Components {
render() {
return (
<button onClick={
() => {
this.props.clickHandler('This is a click')
}
}></button>
)
}
}
import ChildComponent from './child-component'
//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
class ParentComponent extends React.Components {
clickHandler(message) {
console.log(message)
}
render() {
return (
<child-component
clickHandler={ this.clickHandler.bind(this) }
/>
)
}
}
服务热线 19970861797
