VUE中solt内容插槽与ng4中投影的使用

一、在VUE中slot的认识

表示父组件分发内容的插槽,父组件中定义这个后,可以直接在子组件中往里面填充内容

• 1、一个父组件就定义一个slot

  <div class="page">
      <!-- 定义一个分发内容的插槽 -->
      <slot></slot>
  </div>

• 2、父组件使用

  <Page>
      <h3>随便定义的</h3>
  </Page>

• 3、如果定义多个插槽的话就要单独取名字

  <div class="page">
      <!-- 定义一个分发内容的插槽 -->
      <slot name="k1"></slot>
      <slot name="k2"></slot>
      <slot></slot>
  </div>

  <Page>
      <h3 slot="k1">我是page组件的内容</h3>
      <h3 slot="k2">我是第二个</h3>
      <h3>随便定义的</h3>
  </Page>

二、在ng4中使用ng-content作为组件之间内容的插槽

• 1、使用单个

  <div>
      <!-- 在ng中定义一个 -->
      <ng-content></ng-content>
  </div>

• 2、使用

  <app-page1>
      <h1>hello word</h1>
  </app-page1>

• 3、如果定义多个

  <div>
      <!-- 在ng中定义一个 -->
      <ng-content></ng-content>
      <ng-content select="k1"></ng-content>
  </div>

  <app-page1>
      <h1>hello word</h1>
      <!--可以用类或者属性来匹配-->
      <h1 class="k1">你好</h1>
      <h1 k1>你好</h1>
  </app-page1>