作用域插槽父组件给子组件传值

在Vue.js中，作用域插槽（scoped slots）允许父组件向子组件传递数据，同时还可以控制数据在子组件中的渲染方式。作用域插槽是Vue 2.1.0版本之后引入的概念，它利用了Vue的模板编译优化。

使用作用域插槽时，父组件通过定义一个带有`slot-scope`属性的`<template>`元素来接收子组件传递的数据。这个`slot-scope`属性接收一个变量，该变量包含了子组件中定义的插槽属性。然后，在这个`<template>`元素内部，父组件可以使用这个变量来决定如何渲染数据。

下面是一个简单的例子来说明这一点：

父组件:

<template>
  <div>
    <child>
      <template slot-scope="slotProps">
        <!-- 使用 slotProps 中的数据来决定如何渲染 -->
        <p>来自子组件的数据: {{ slotProps.message }}</p>
      </template>
    </child>
  </div>
</template>

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

子组件:

<template>
  <div>
    <slot :message="dataFromChild">默认内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataFromChild: '你好，这是从子组件传来的消息！'
    }
  }
}
</script>

在这个例子中，子组件通过`<slot>`标签定义了一个插槽，并通过绑定属性传递了一个消息给父组件。父组件接收到这个消息并将其作为`slotProps`变量的一部分，然后在`<template>`中使用这个变量来渲染数据。