v-slot的用法(代替slot和slot-scope)

v-slot的用法(去除了slot和slot-scope)

• 具名插槽
  根组件

  <div id="app">
    <Son>
      <template v-slot:name><!-- 这里注意是v-slot:子组件的插槽名 -->
        <span>替换了</span>
      </template>
    </Son>
  </div>

子组件

    <div>
      我是子组件
      <slot name="name">我是默认名称:{{name}}</slot>
    </div>

• 作用域插槽

  <div id="app">
    <Son>
      <template v-slot:son="msg"><!--这里看清楚噢-->
        <span>{{msg}}</span>
      </template>
    </Son>
  </div>

    <div>
      我是子组件
      <slot name="son" :data="name">我是默认名称:{{name}}</slot>
    </div>

• 将以前的简化了一些，替换了slot、slot-scope，2.6.0+ 就废弃了这两个指令
• 具名插槽：v-slot:子组件插槽的name
• 作用域插槽：v-slot:子组件的插槽name=“自定义名”配合子组件的插槽上的属性:自定义="变量"