插槽传值

provide的使用

1.优点：provide传值不需要考虑子级什么时候需要这个值，也不需要考虑子级与父级之间搁了多少层级

2.缺点：

父级代码

<template>
  <div id="app">
    <MySlot>
      <template #left>{{ left }}</template>
      <template #center="{author}">{{author.firstName}}</template>
      <template #right>{{ right }}</template>
    </MySlot>
  </div>
</template>

<script>
import MySlot from "./components/my-slot.vue"

export default {
  name: 'App',
  components: {
    MySlot 
  },
  data(){
    return{
      left:'leftleftleftleftleft',
      right:'rightrightrightright'
    }
  }
}
</script>

子级代码

<template>
  <div class="myslot">
    <slot name="left"></slot>
    <slot name="center" :author="wxb"></slot>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  name:'myslot',
  data(){
    return{
      wxb:{
        firstName:'wang',
        lastName:'xinbo'
      }
    }
  }
}
</script>