目前流行的前端MVVM框架主要有vue，react，angular这三种，若我们要开发前端的单页面系统，这三大主流框架是我们常常拿来一起比较的，这三大框架基本都是最近三五年发展起来的，具体优劣及排名在这里我不做评比，网上有很多文章，但都不一而足，具体选择哪一种只能看团队（主要是领导喜好）及项目情况，不过这三种有个共同点就是都基于模块化，组件化的思想来设计的，具体的什么模板，语法，渲染，数据绑定，路由等每个框架实现方式有所差别，但都是可以拿来作为比较和学习的内容。
正所谓：
三大帮派各风骚，
帮众喜斗耍绝招；
天下武功自少林，
江湖暗藏胡一刀。
关于父子组件中投影(插槽)
angular
子组件是通过 ng-content 标签实现
- 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 标签实现，使用同angular。
react
子组件是通过 this.props.children 标签实现。
// 子组件
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>
}
}
