目前流行的前端MVVM框架主要有vue，react，angular這三種，若我們要開發(fā)前端的單頁面系統(tǒng)，這三大主流框架是我們常常拿來一起比較的，這三大框架基本都是最近三五年發(fā)展起來的，具體優(yōu)劣及排名在這里我不做評比，網上有很多文章，但都不一而足，具體選擇哪一種只能看團隊（主要是領導喜好）及項目情況，不過這三種有個共同點就是都基于模塊化，組件化的思想來設計的，具體的什么模板，語法，渲染，數(shù)據(jù)綁定，路由等每個框架實現(xiàn)方式有所差別，但都是可以拿來作為比較和學習的內容。
正所謂：
三大幫派各風騷，
幫眾喜斗耍絕招；
天下武功自少林，
江湖暗藏胡一刀。

關于父子組件中投影(插槽)

angular

子組件是通過 ng-content 標簽實現(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>我是頭部投影進去的</header>
  <div class="content">我是身體部分投影進來的</div>
  <div name="footer">我是底部投影過來的</div>
</child-component>

vue

子組件是通過 slot 標簽實現(xiàn)，使用同angular。

react

子組件是通過 this.props.children 標簽實現(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>
    }
}