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

目前流行的前端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>
    }
}

转载于:https://www.jianshu.com/p/e11a25ec28f8