Comparison of the front end frame --vue, react, angular slots using

Popular front-end framework for MVVM main vue, react, angular three, single-page system if we are to develop front-end, these three mainstream framework is often used to compare us together, these three are the basic framework for the last three five years to develop, the specific merits of the ranking here and I do not do competitions, there are many online articles, but are numerous, the specific choice of which one can only look at the team (mainly leadership preferences) and the project, but these three have in common that are based on a modular, component-based ideas to design, what specific template, grammar, rendering, data binding, routing, etc. each frame implementations different, but all can take as a comparison to the content and learning.
As the saying goes:
three gangs each coquettish,
Bangzhong hi bucket playing trick;
the world from the Shaolin martial arts,
rivers and lakes hidden Yidao.

Sons assembly on the projection (slot)

angular

Sub-assembly is obtained by ng-content achieved tag

• select = "name only" (custom attributes):
  <ng-content select="header"></ng-content>
• select=”.className”(class类名)
  <ng-content select=".content"></ng-content>
• select = "[name = unique name]" (attributes)
  <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>

---

view

Subassemblies through slot label achieved using the same angular.

---

react

Subassemblies by this.props.children achieve label.

// 子组件
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>
    }
}

Reproduced in: https: //www.jianshu.com/p/e11a25ec28f8