屬性的覆蓋

在引用子元件的時候，可以在標籤上設定一些屬性的，如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
• ...