vue slot传值

在Vue中，slot是一种特殊的语法，它允许我们在组件中插入内容。slot可以用来传递任何类型的数据，包括字符串、数字、对象、数组等等。在父组件中，我们可以使用slot-scope指令来访问子组件中的数据。

下面是一个简单的例子，展示了如何在Vue中使用slot传递数据：

// 子组件
<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: 'John',
        age: 30
      }
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <my-component>
      <template slot-scope="{ data }">
        <p>Name: {{ data.name }}</p>
        <p>Age: {{ data.age }}</p>
      </template>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

在上面的例子中，我们在子组件中定义了一个slot，并将data作为参数传递给它。在父组件中，我们使用slot-scope指令来访问子组件中的数据，并在模板中显示它们。