vue slot-scope

Vue 的 slot-scope 是用来在父组件向子组件传递数据的一种方式。它主要用于自定义插槽的作用域，让子组件能够访问到父组件的数据和方法。

在父组件中，可以通过在插槽上使用 slot-scope 属性来定义插槽的作用域。例如：

<template>
  <div>
    <child-component>
      <template slot-scope="props">
        <!-- 在这里可以访问到父组件中的属性和方法 -->
        <p>{{ props.data }}</p>
        <button @click="props.method">Click me</button>
      </template>
    </child-component>
  </div>
</template>

在子组件中，可以通过具名插槽来接收父组件传递的作用域。例如：

<template>
  <div>
    <slot :data="someData" :method="someMethod"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someData: 'Hello, World!',
    };
  },
  methods: {
    someMethod() {
      console.log('Button clicked');
    },
  },
};
</script>

这样子组件就可以在插槽中访问到父组件的属性和方法，从而实现了数据的传递和交互。