VUE组件的使用、Slot、Props

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 {
    };