前端框架--vue，react，angular插槽使用比较

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

关于父子组件中投影(插槽)

angular

子组件是通过 ng-content 标签实现

• select=”唯一的名称”(自定义属性):
  
• select=”.className”(class类名)
  
• select=”[name=唯一的名称]”(属性)
  
  eg:

//子组件child-component





//父组件

  
我是头部投影进去的
  
我是身体部分投影进来的
  
我是底部投影过来的

---

vue

子组件是通过 slot 标签实现，使用同angular。

---

react

子组件是通过 this.props.children 标签实现。

// 子组件
class Child extends React.Component {
    render() {
        return 

            {this.props.children}
        
    }
}

// 父组件
class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'hello world！'
        }
    }
    render() {
        return 

            
                {this.state.name}
            
        
    }
}