vue3中插槽

在Vue 3中，插槽的使用方式与Vue 2有所不同。Vue 3中引入了新的组件声明方式，即使用`<script setup>`语法来定义组件。下面是Vue 3中插槽的使用方法： 1. 默认插槽： 在父组件中，可以使用`<slot>`标签来定义默认插槽。子组件中的内容将会被插入到父组件中的`<slot>`标签所在的位置。例如： ```vue <!-- ParentComponent.vue --> <template> <div> <slot></slot> </div> </template> <!-- ChildComponent.vue --> <template> <div> <h1>Child Component</h1> <p>This is the content of the child component.</p> </div> </template> ``` 在父组件中使用子组件时，可以将子组件的内容放在父组件的标签内： ```vue <!-- App.vue --> <template> <div> <parent-component> <h2>Parent Component</h2> <p>This is the content of the parent component.</p> </parent-component> </div> </template> ``` 运行后，父组件中的`<slot>`标签将会被子组件的内容替换。 2. 具名插槽： 在父组件中，可以使用`<slot>`标签的`name`属性来定义具名插槽。子组件中的内容可以通过`<template v-slot:插槽名>`或`<template #插槽名>`来指定插入到具名插槽中。例如： ```vue <!-- ParentComponent.vue --> <template> <div> <slot name="header"></slot> <slot></slot> </div> </template> <!-- ChildComponent.vue --> <template> <div> <template v-slot:header> <h1>Header</h1> </template> <h2>Child Component</h2> <p>This is the content of the child component.</p> </div> </template> ``` 在父组件中使用子组件时，可以使用`<template v-slot:插槽名>`或`<template #插槽名>`来指定具名插槽的内容： ```vue <!-- App.vue --> <template> <div> <parent-component> <template v-slot:header> <h2>Parent Component Header</h2> </template> <h3>Parent Component</h3> <p>This is the content of the parent component.</p> </parent-component> </div> </template> ``` 运行后，父组件中的`<slot name="header">`标签将会被子组件的具名插槽内容替换。 3. 作用域插槽： 在Vue 3中，作用域插槽被称为"带有参数的插槽"。父组件可以通过在`<slot>`标签上使用`v-slot:参数名`或`#参数名`来接收子组件传递的数据。例如： ```vue <!-- ParentComponent.vue --> <template> <div> <slot name="header" v-bind:user="user"></slot> </div> </template> <!-- ChildComponent.vue --> <template> <div> <template v-slot:header="slotProps"> <h1>{{ slotProps.user.name }}</h1> </template> <h2>Child Component</h2> <p>This is the content of the child component.</p> </div> </template> <script> export default { data() { return { user: { name: &#39;John&#39;, age: 25 } }; } }; </script> ``` 在父组件中使用子组件时，可以通过`v-slot:参数名`或`#参数名`来接收子组件传递的数据： ```vue <!-- App.vue --> <template> <div> <parent-component> <template v-slot:header="slotProps"> <h2>{{ slotProps.user.name }} - {{ slotProps.user.age }}</h2> </template> <h3>Parent Component</h3> <p>This is the content of the parent component.</p> </parent-component> </div> </template> ``` 运行后，父组件中的`<slot name="header" v-bind:user="user">`标签将会被子组件的作用域插槽内容替换，并且可以访问子组件传递的数据。