vue3怎么使用slot

在Vue 3中，你可以使用`<slot>`元素来定义插槽(slot)。你可以在父组件中使用具名插槽(v-slot)或作用域插槽进行渲染不同的内容。

具名插槽(v-slot)用于在父组件中渲染不同的内容。你可以在父组件的模板中使用`<template>`标签，并通过`v-slot`指令来定义具名插槽。例如：

const app = Vue.createApp({
  template: `
    <layout>
      <template v-slot:header>
        <div>header</div>
      </template>
      <template v-slot:footer>
        <div>footer</div>
      </template>
    </layout>
  `
})
app.component('layout', {
  template: `
    <div>
      <slot name="header"></slot>
      <div>content</div>
      <slot name="footer"></slot>
    </div>
  `
})
const vm = app.mount("#root")

作用域插槽用于在子组件中渲染数据，并在父组件中定义不同的标签。你可以在子组件的模板中使用`<slot>`标签，并通过`v-for`指令和`:item`属性来定义作用域插槽。例如：

const app = Vue.createApp({
  template: `
    <mylist>
      <span>{{slotProps.item}}</span>
    </mylist>
  `
})
app.component('mylist', {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  template: `
    <div>
      <slot v-for="item in list" :item="item"></slot>
    </div>
  `
})
const vm = app.mount("#root")

除了具名插槽和作用域插槽之外，你还可以在使用插槽时更灵活地控制渲染的内容。例如，在父组件中使用双标签，并在子组件中使用`<slot>`元素来替换标签之间的内容。例如：

const app = Vue.createApp({
  template: `
    <myform>
      <div>提交</div>
    </myform>
    <myform>
      <button>提交</button>
    </myform>
  `
})
app.component('myform', {
  methods: {
    handleClick() {
      alert('handleClick')
    }
  },
  template: `
    <div>
      <input />
      <span @click="handleClick">
        <slot></slot>
      </span>
    </div>
  `
})
const vm = app.mount("#root")

以上就是Vue 3中使用插槽的方法。你可以根据需要选择具体的插槽方式来渲染不同的内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3中的slot](https://blog.csdn.net/q709971076/article/details/120068271)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]