插槽

插槽

属性的覆盖

在引用子组件的时候，可以在标签上设置一些属性的，如id、name、class、style等

• 这些属性会直接设置到组件的根标签上
• 如果根标签上有重复的属性引用的时候设置的属性会覆盖之前的属性。
• 对于class和style不会进行覆盖，而是进行合并操作
• 如果想在组件中获取到父组件传递过来的属性的话，通过this.$attrs.属性名 获取。（这里不会获取到在props上设置的属性）

 

插槽

作用

可以给组件传递一些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
• ...