插槽

作用

可以给组件传递一些html的数据。

怎么使用

我们在组件标签内部写的html代码都会被放到组件内部template里的<slot></slot>位置。

如果希望把指定的html放到指定的位置(命名插槽)

旧版的书写方式

子组件

<template>
    <div>
    <slot name="header"></slot>
      
  </div>
</template>

父组件

 <div>
    <div slot="header">头部</div> 
  </div>

新版的书写方式

子组件

<template>
    <div>
    <slot name="header"></slot>
      
  </div>
</template>

父组件

    <div>
    <template v-slot:header>
      <div slot="header">头部</div> 
        </template>
  </div>

设计组件的时候需要考虑的问题

• 组件的props（组件有哪些数据需要传递进来）
• 组件的slot（组件有哪些html需要传递进来）
• 组件的事件（组件有哪些事件）
• 做好一个组件，如果这个组件要被很多人用的化，我们需要提供一个使用文档。

ref

做什么的？

• 获取dom
• 获取组件的实例

怎么用

• 给需要获取的dom或者组件添加ref属性，相当与给这个组件或者dom起了个名字
• this.$refs.名字可以获取到这个dom或者组件

• 获取到组件之后

• 可以拿到组件的数据
• 可以调用组件的方法
• 可以理解为拿到了这个组件的this
• ...