目前流行的前端MVVM框架主要有vue，react，angular這三種，若我們要開發(fā)前端的單頁面系統(tǒng)，這三大主流框架是我們常常拿來一起比較的，這三大框架基本都是最近三五年發(fā)展起來的，具體優(yōu)劣及排名在這里我不做評(píng)比，網(wǎng)上有很多文章，但都不一而足，具體選擇哪一種只能看團(tuán)隊(duì)（主要是領(lǐng)導(dǎo)喜好）及項(xiàng)目情況，不過這三種有個(gè)共同點(diǎn)就是都基于模塊化，組件化的思想來設(shè)計(jì)的，具體的什么模板，語法，渲染，數(shù)據(jù)綁定，路由等每個(gè)框架實(shí)現(xiàn)方式有所差別，但都是可以拿來作為比較和學(xué)習(xí)的內(nèi)容。
正所謂：
三大幫派各風(fēng)騷，
幫眾喜斗耍絕招；
天下武功自少林，
江湖暗藏胡一刀。
關(guān)于父子組件中投影(插槽)
angular
子組件是通過 ng-content 標(biāo)簽實(shí)現(xiàn)
- select=”唯一的名稱”(自定義屬性):
<ng-content select="header"></ng-content> - select=”.className”(class類名)
<ng-content select=".content"></ng-content> - select=”[name=唯一的名稱]”(屬性)
<ng-content name="footer"></ng-content>
eg:
//子組件child-component
<!--下面定義投影-->
<ng-content select="header"></ng-content>
<ng-content select=".content"></ng-content>
<ng-content select="[name=footer]"></ng-content>
//父組件
<child-component>
<header>我是頭部投影進(jìn)去的</header>
<div class="content">我是身體部分投影進(jìn)來的</div>
<div name="footer">我是底部投影過來的</div>
</child-component>
vue
子組件是通過 slot 標(biāo)簽實(shí)現(xiàn)，使用同angular。
react
子組件是通過 this.props.children 標(biāo)簽實(shí)現(xiàn)。
// 子組件
class Child extends React.Component {
render() {
return <div>
{this.props.children}
</div>
}
}
// 父組件
class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'hello world！'
}
}
render() {
return <div>
<Child>
{this.state.name}
</Child>
</div>
}
}
