【vue学习笔记】简单理解作用域插槽

作用域插槽解决的问题：父组件访问子组件的数据

官网地址

举例：

子组件中，将数据v-bind在slot标签上：

<template>
  <div class="hello">
    <slot :item="item"></slot>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
      return {
          msg: '我是子组件的msg',
          item: '我是item',
      }
  }
}
</script>

<style scoped>
</style>

父组件中，在子组件标签<HelloWorld>上v-slot 子组件的数据（名字自己起，下面例子用了解构的方式）

<template>
    <div class="hello">
        <HelloWorld v-slot="{item: todo}">
            哈哈哈{{todo}}
        </HelloWorld>
    </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
export default {
    components: {
        HelloWorld,
    },
    name: 'TestSlot',
    data () {
        return {
            msg: '我是父组件的msg'
        }
    }
}
</script>

<style scoped>
</style>