VUE组件的使用、Slot、Props

最新推荐文章于 2024-09-13 17:13:32 发布

一秀哥

最新推荐文章于 2024-09-13 17:13:32 发布

阅读量639

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/qq_49076274/article/details/114366335

版权

本文详细介绍了Vue中的组件使用，包括全局和局部定义组件。重点讲解了Slot插槽的运用，从基础用法到命名插槽的进阶使用，并通过实例展示了如何在父组件中插入不同内容到子组件相应位置。此外，还探讨了Props传参的机制，通过实例展示了父组件如何向子组件传递参数，并在子组件中接收和使用这些参数。

摘要由CSDN通过智能技术生成

Vue学习

- 组件的使用

步骤：定义组件→声明组件→使用组件

①全局定义
在这里插入图片描述

②局部定义

在这里插入图片描述

Slot插槽在组件中的运用

<slot> 就是外部调用时，标签中的内容。如果外部调用时没有提供内容的话，那么它就会使用自己默认提供的内容，非常方便。
*Slot就是把html从父组件传到子组件*

①基础使用
父组件:

<template>
  <div>
    <SlotSon>
        <P>我是父组件中的内容，可以通过插槽传递</P>
    </SlotSon>
  </div>
</template>
<script>
import SlotSon from "./SlotSon";
export default {
    
  name: "SlotFather",
  components: {
    
    SlotSon
  }
};
</script>
<style></style>

子组件（未设置插槽）：

<template>
  <div>
      <!-- hahahah(子组件中插槽之外的可以显示)
    <div>
      <slot name="header">ee（插槽之内的，如果父组件中有内容了就无法显示）</slot>
    </div>
    <div>
      <slot></slot>
      <slot></slot>
    </div>
    <div>
      <slot name="footer"></slot>
    </div> -->
    <p>我是子组件中的内容</p>
  </div>
</template>
<script>
export default {
    
  name: "SlotSon",
  data() {
    
    return {
    };
  }
}