vue中slot和template用法传值

在Vue中，slot和template v-slot指令都用于内容分发，但它们有不同的用途。

slot：用于组件内部定义可插入的插槽。

template：用于包装不希望在DOM中渲染的内容。

而关于传值，slot可以接受来自父组件的数据，而template不直接接受外部数据，但可以通过v-slot指令在使用插槽时接收从子组件传递的数据。

以下是一些示例代码：

1. 使用slot进行传值：

父组件：

<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <!-- 使用来自子组件的数据 -->
      <p>{{ slotProps.text }}</p>
    </template>
  </ChildComponent>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>
    <!-- 定义一个插槽 -->
    <slot :text="'Hello, World!'"></slot>
  </div>
</template>

2. 使用template包装不想渲染的内容：

<template>
  <div>
    <span>这部分会被渲染</span>
    <template v-slot:default>
      <span>这部分不会被渲染</span>
    </template>
  </div>
</template>

在这个例子中，<span>这部分不会被渲染</span>不会出现在最终的DOM中，因为我们使用template标签包裹了它，并且没有在父组件中引用它。