vue 插槽如何绑定值传递给父组件

Vue插槽可以通过作用域插槽来向父组件传递值，具体步骤如下：

1. 在父组件中定义一个变量来接收插槽的值：

<template>
  <child>
    <template #default="slotProps">
      <div @click="handleClick(slotProps.value)">{{ slotProps.value }}</div>
    </template>
  </child>
</template>

<script>
export default {
  data() {
    return {
      value: null
    }
  },
  methods: {
    handleClick(value) {
      this.value = value
    }
  }
}
</script>

2. 在子组件中定义一个带有参数的作用域插槽，并将需要传递的值作为参数传递给插槽：

<template>
  <div>
    <slot :value="foo"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: 'bar'
    }
  }
}
</script>

在这个例子中，父组件中的插槽通过 `slotProps.value` 获取到了子组件中的值，并在点击事件中将其传递给了父组件中的 `handleClick` 方法。最终，父组件中的 `value` 变量被赋值为子组件中的值。