vue3具名插槽name属性v-bind无效?

在Vue3中，具名插槽的使用方式与Vue2相似，但有一些细微的变化。在使用具名插槽时，确实需要使用`name`属性来指定插槽的名称，但是`v-bind`指令在Vue3中的使用方式有所不同。

在Vue3中，`v-bind`指令应该被替换为`:`，例如：

<template>
  <div>
    <component>
      <template v-slot:[slotName]>
        <p>{{ message }}</p>
      </template>
    </component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world!'
    }
  },
  mounted() {
    console.log(this.$refs.child.$slots)
  }
}
</script>

在上面的示例中，`template`标签中的`v-slot:[slotName]`指令用于动态地指定插槽名称，其中`slotName`是一个变量，可以在组件中动态地设置。例如：

<component ref="child">
  <template #foo>
    <p>Hello from foo!</p>
  </template>
  <template #bar>
    <p>Hello from bar!</p>
  </template>
</component>

<script>
export default {
  mounted() {
    this.$refs.child.$slots.foo[0].children[0].text = 'Hello world!'
  }
}
</script>

在上面的示例中，我们使用`this.$refs.child.$slots.foo`访问了名为`foo`的插槽，并修改了它的内容。请注意，我们没有使用`v-bind`，而是直接在模板中写了`#foo`来指定插槽的名称。