Vue 插槽

Vue 组件插槽

在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope。
在组件标签内的内容，需要组件使用插槽接收，否则将会被丢弃

Vue.component('my-component', {
  data() {
    return {
      message: ''
    }
  },
  template:`
    <div>
      子组件原有内容
      <slot></slot>
    </div>
  `
})

let vm = new Vue({
  el: document.querySelector('#id'),
  data: {
    message: ''
  },
  template: `
    <div>
      <my-component>
        我是插槽内容
      </my-component>
    </div>
  `,
})

也可以在中书写默认内容，例如：

template:`
    <div>
      子组件原有内容
      <slot>默认内容</slot>
    </div>
  `

多个插槽：具名插槽

如果需要使用多个插槽，可以使用具名插槽

Vue.component('my-component', {
  data() {
    return {
      message: 'message'
    }
  },
  template:`
    <div>
      子组件原有内容
      <slot name="header"></slot>
      <slot name="body"></slot>
      <slot name="footer"></slot>
    </div>
  `
})

let vm = new Vue({
  el: document.querySelector('#id'),
  data: {
    text: 'text'
  },
  template: `
    <div>
      <my-component>
        <template v-slot:header>我是头部</template>
        <template v-slot:body>我是身体</template>
        <template v-slot:footer>我是底部</template>
      </my-component>
    </div>
  `,
})
// 2.6之前旧语法
// <template slot="header"><template>...

访问子组件数据：作用域插槽

模板写在哪里，作用域就在哪里。所以在父组件中添加子组件的插槽内容，但是无法访问子组件的数据，此时可以用作用域插槽。

Vue.component('my-component', {
  data() {
     return {
       message: 'message'
     }
   },
   template:`
     <div>
       子组件原有内容
       <slot></slot>
     </div>
   `
 })

 let vm = new Vue({
   el: document.querySelector('#id'),
   data: {
     text: 'text'
   },
   template: `
     <div>
       <my-component>
         <template>{{message}}</template>
       </my-component>
     </div>
   `,
 })

上述代码获取到message，因为message在子组件内，而模板渲染在父组件，即作用域是父组件作用域，父组件没有message。
变成作用域插槽即可：

// 子组件将数据作为attribute传入
template:`
  <div>
     子组件原有内容
     <slot :message="message"></slot>
   </div>
 `
 // 父组件接收的数据在一个对象内，名字可以自己定义，此处用的是slotProps
template: `
  <div>
    <my-component>
      <template v-slot="slotProps">{{slotProps.message}}</template>
    </my-component>
  </div>
`,
// 因为是对象，可以解构出来，这样更加整洁
template: `
  <div>
    <my-component>
      <template v-slot="{message}">{{message}}</template>
    </my-component>
  </div>
`,