Vue組件開發學習總結

使用Vue各種ui框架如element-ui，iview可以提供開發效率。但是用別人的手短，有時候它們不能完全滿足我們自己的需求。所以就促使我萌生了開發自定義組件的念頭。由需求推動學習，重新去vue2的官網查看了組件開發這一節的內容。開始開發一個可拖曳的Modal對話框組件。

組件的構成

首先要了解如何構造一個組件，其實Vue作爲spa開發，每一個vue文件都可以看做是一個組件。只不過這裏我們說的是更加細微的組件————即頁面中的某個部分如：按鈕，輸入框之類的。

• prop
  • prop用來接收父組件傳遞給子組件的值，且是由父組件向子組件單向傳遞的。
  • prop是單向傳遞的，所以不建議在子組件中手動改變prop的值。如果你這麼做了，也不會報錯，但是會有一個提示。那麼子組件想要prop的話該怎麼辦呢？請看自定義事件。
  • prop驗證：prop可以自定義驗證函數來校驗prop接收到的值是否滿足要求，這一點很有用處，也很自由。
• 自定義事件

  •  事件名稱推薦使用kebab-case方式命名,camelCase命名方法會因爲HTML大小寫不敏感，將大寫字母全都轉換爲小寫字母，容易造成一些誤會。

  • v-model：一個組件上的 v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件。你也可以自定義一個v-model。如：

    Vue.component("demo",{
    
        model:{
            prop: "name"
            event: "input"
        },
        props:{
            name:{
                type:String
            }
        }
    })

    注意：model下面的prop要與props中設置的porp對應。上面的v-model也同樣能達到雙向綁定的效果

  •  $listeners這個屬性目前沒有用到，所以等用到後再回來補充。

• 插槽（slot）
  • 插槽使用

    <!-- demo1 -->
    <!-- 組件使用 -->
    <demo>
        hello word   
    </demo>
    
    <!-- demo組件內部 -->
    <div class="demo1">
        <slot></slot>
    </div>
    
    <!-- 渲染後 -->
    <div class="demo1">
        hello word
    </div>

    註釋：插槽內可以包含任意的模板代碼。

• 具名插槽

  • 組件中可能會用到多個插槽，那麼內部出現多個slot標籤，又如何將外部的內容放置進你想要放入的slot標籤內呢？這時候就需要使用具名插槽。

    ​
    <!-- demo2 -->
    <!-- 組件使用 -->
    <demo2>
        <template slot="header">
            <p>header</p>
        </template>
        <template slot="footer">
            <p>footer</p>
        </template>    
    </demo>
    
    <!-- demo組件內部 -->
    <div class="demo2">
        <slot name="header"></slot>
        <slot name="footer"></slot>
    </div>
    
    <!-- 渲染後 -->
    <div class="demo2">
        <p>header</p>
        <p>footer</p>
    </div>
    
    ​

    具名操作顧名思義，就是要給slot插槽標籤賦予一個name。在使用組件的時候，需要配合template標籤來給具體名稱的slot標籤內添加內容，template的slot屬性的值應該與組件內容部slot標籤中name屬性的值一致。這樣就可以達到在多個插槽裏各自放入對應的內容的目的了。

組件的註冊

• 全局註冊
• 局部註冊

• 
  // 全局註冊
  // main.js
      import DemoComponent from "your component path";
      Vue.component("demo",DemoComponent);// 將組件全局註冊，並使用demo標籤使用。
  
  
  // 局部註冊
  // 子頁面中註冊組件 只有在這個頁面內可以使用
      import DemoComponent from "your component path";
      export default{
  
          ...
          components:{
              "demo": DemoComponent
          }
      }
  
    

   

前端框架不能滿足需求的情況下，更加熱衷於自己開發，如何開發可複用，高質量的組件是我下一階段的目的。