Vue學習計劃基礎筆記(六) – 元件基礎

ChiFUNG發表於2018-07-18
Vue筆記元件

元件基礎

目標：

  1. 掌握元件的構建方式
  2. 掌握如何複用元件、父子元件如何傳值、如何向父元件傳送訊息
  3. 掌握如何通過插槽分發內容
  4. 瞭解解析dom模板時的注意事項
  5. 瞭解動態元件

元件

  1. 元件理解起來大概上就和php的include一樣, 也就是把頁面分成幾個部分(或檔案).
  2. 元件就是把頁面分成幾塊,每一塊就是一個元件,元件使用起來就是引入,宣告,使用.
  3. 很通俗的說,元件的使用就是自定義html標籤的使用.

元件的註冊(定義)

1.全域性元件

// (元件名, 配置)
Vue.component(`cpn-name`,{
    data: function(){
        return {
            count: 0
        }
    }
    template: `<button @click="count++">{{count}}</button>`
});

2.區域性元件

...
components: {
    cpnName: {
        data: function(){
            return {
                count: 0
            }
        }
        template: `<button @click="count++">{{count}}</button>`
    }
};
...
  1. 單檔案元件

元件注意點

  1. 元件名的大小寫
    定義的時候可以使用 my-component 或者 MyCompnent 這樣的形式
    使用的時候因為html是大小寫不敏感的, 在DOM(非字串模版)中使用時只有my-component的形式是有效的.

  2. 元件的data必須是一個函式
    這個函式返回一個物件.
    至於為什麼要是function(){return{..}}的形式, 那是因為這樣每個例項可以維護一份被返回物件的獨立的拷貝, 不然複用的時候會相互影響.

  3. 元件的複用
    元件在複用的時候,因為data的定義是return的物件,所以每用一次元件,就會有一個它的新 例項 被建立, 同樣data也會是新的.

  4. 單個根元素
    在構建元件的時候,元件只能有一個根元素,如果元件內包含多個元素,根元素只能有一個.

  5. 元件的使用
    <my-component></my-component>這樣使用就可以了
    (在單檔案元件(Vue檔案)中文件推薦使用<my-component/>這種寫法,但是在HTML中文件不推薦使用<my-component/>這種寫法,因為HTML並不支援自閉合的自定義元素)

元件傳遞資料

父元件 => 子元件 (通過prop)

  1. prop是元件上自定義的特性,在 父元件 使用子元件的時候加上. 可以在 子元件 註冊的時候通過props0拿到這些prop值.
  2. 例子
<blog-post title="Blogging with Vue"></blog-post>
Vue.component(`blog-post`, {
  props: [`title`],
  template: `<h3>{{ title }}</h3>`
})

編譯後:

<h3>Blogging with Vue<h3>

子元件 => 父元件 (通過$emit()傳送事件傳遞引數)

  1. 在模版中使用普通的js事件來觸發$emit(),
    $emit(`my-event`)是一個用來主動觸發事件的方法,
    而這個`my-event`就是可以在 父元件 使用子元件的時候加上的,
    利用觸發這個`my-event`可以觸發父元件中的methods
    中間只要傳遞引數就可以實現傳值了

  2. 例子
Vue.component(`blog-post`, {
  props: [`post`],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
        <button v-on:click="$emit(`enlarge-text`)">   <!-- 1.觸發enlarge-text -->
        Enlarge text
        </button>
      <div v-html="post.content"></div>
    </div>
  `
})
<blog-post
  v-on:enlarge-text="postFontSize += 0.1"             <!-- 2.被觸發enlarge-text然後執行對應操作 -->
></blog-post>

元件插槽(slot)分發內容

  1. 一般來說,兩個開閉標籤之間是有內容的,那麼如果在元件(自定義標籤)開閉標籤之間寫入的內容的話會怎麼樣, slot就是用在接收的了, 只要在元件模版裡面寫上就可以接收了.

  2. 例子:
Vue.component(`alert-box`, {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
<alert-box>這是錯誤</alert-box>

編譯後:

    <div class="demo-alert-box">
      <strong>Error!</strong>
      這是錯誤
    </div>

動態元件

  1. 概括: 使用一個is特性(屬性),來指定元件
  2. 也就是我們可以動態的去改變is的值, 然後實現動態的顯示不同的元件
  3. 例子:
<!-- 元件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>

解析DOM模版時的注意事項

  1. 在HTML標準中,有些元素是固定的巢狀的, 例如ul>li, ol>li,table, select, 假如要在這些標籤內使用元件,就需要使用is來指定元件,不然就會報錯.

  2. 例子:
<!-- 報錯 -->
<table>
  <blog-post-row></blog-post-row>
</table>
<!-- 正確 -->
<table>
  <tr is="blog-post-row"></tr>
</table>

相關文章