關鍵詞：

data/$data         資料依賴
props/$props       父元件傳值通道
slot                分發
created             Vue生命週期
$listeners         靜態函式傳遞
$emit              事件傳遞
$on                    事件繫結
watch               監聽資料變化
provide             向父元件傳遞資料
inject              子元件接受接收
$attrs             靜態資料傳遞
inheritAttrs        標籤美化
 

中心思想

子元件擁有自身狀態的同時，允許父元件對自身進行任何操作

生命週期

元件的進階封裝，需要對Vue生命週期有簡單的瞭解

需要了解的小夥伴請檢視我的另一篇部落格：

本文以button元件封裝為例

基礎元件

export const GlobelButton = {
  template: `
  <div>
    <button type="button" :style="style">
      {{title}}
    </button>
  </div>
  `,
  data
 
 () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      },
      title: 'title'
    }
  }
}

暴露出一個button元件，已經在子元件內部寫好樣式，父元件可以直接引用

允許父元件控制title屬性

export const GlobelButton = {
  template: `
  <div>
    <button type="button"
 
 :style="style">
      {{title}}
    </button>
  </div>
  `,
  data () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      }
      ####################
      // title: 'title'
      ####################
    }
  },
  ####################
  props: {
    // innerHtml 文案
    title: {
      type: String,
      default: function () { return '暫未定義title' }
    }
  }
  #####################
}

允許父元件傳入的title值覆蓋子元件本身資料，併為子元件提供預設資料 #區域為修改區域

為元件增加插槽

export const GlobelButton = {
  template: `
  <div>
      ###########
      <slot name="first"></slot>
      ########
        <button type="button" :style="style">
          {{title}}
        </button>
      ###########
      <slot name="end"></slot>
      #############
  </div>
  `,
  data () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      }
    }
  },
  props: {
    // innerHtml 文案
    title: {
      type: String,
      default: function () { return '暫未定義title' }
    }
  }
}

插槽的新增很多程度上擴充套件了元件的靈活性，允許父元件任意的增加DOM

將樣式控制交給父元件

export const GlobelButton = {
  template: `
  <div>
      <slot name="first"></slot>
        <button type="button" :style="style">
          {{title}}
        </button>
      <slot name="end"></slot>
  </div>
  `,
  ######################
  created () {
    const styled = this.styled || {}

    if (!styled) return

    if (styled instanceof Object || JSON.stringify(styled) !== '{}') {
      for (const key in styled) {
        this.style[key] = styled[key]
      }
    }
  },
  #######################
  data () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      }
    }
  },
  props: {
    // innerHtml 文案
    title: {
      type: String,
      default: function () { return '暫未定義title' }
    },
    ########################
    // 樣式
    styled: {
      type: Object,
      default: function () { return {} }
    }
    #######################
  }
}

元件中的樣式是通過物件style來控制的，如何才能做到讓父元件動態控制style物件的值呢？在Vue——神祕的生命週期一文中我們知道，created生命週期中data、$data、$props都已經準備完畢，那麼我們就可以在這裡做一些改變。

改變父元件狀態

export const GlobelButton = {
  template: `
  <div>
      <slot name="first"></slot>
      ################
        <button type="button" :style="style"  @click="changeBg">
      #################
          {{title}}
        </button>
      <slot name="end"></slot>
  </div>
  `,
  created () {
    const styled = this.styled || {}

    if (!styled) return

    if (styled instanceof Object || JSON.stringify(styled) !== '{}') {
      for (const key in styled) {
        this.style[key] = styled[key]
      }
    }
  },
  data () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      }
    }
  },
  ########################
  methods: {
    changeBg () {
      this.style.backgroundColor = 'green'
      this.$emit('change-color', 'green')
    }
  },
  ########################
  props: {
    // innerHtml 文案
    title: {
      type: String,
      default: function () { return '暫未定義title' }
    },
    // 樣式
    styled: {
      type: Object,
      default: function () { return {} }
    }
  }
}

我們經常會遇到需要同步改變子元件以及父元件狀態的情況，如dialog的顯示和隱藏狀態的觸發，然而Vue並不建議我們直接修改props的值，此時我們可以藉助emit觸發this.$emit觸發this.$listeners中由父元件$on繫結的方法，自然也可以配合watch使用，監聽父元件的值並同步修改子元件狀態

接受父元件公共狀態

export const GlobelButton = {
  template: `
  <div>
      <slot name="first"></slot>
        <button type="button" :style="style"  @click="changeBg">
          {{title}}
        </button>
        #############
        {{inject}}
        #############
      <slot name="end"></slot>
  </div>
  `,
  created () {
    const styled = this.styled || {}

    if (!styled) return

    if (styled instanceof Object || JSON.stringify(styled) !== '{}') {
      for (const key in styled) {
        this.style[key] = styled[key]
      }
    }
  },
  data () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      }
    }
  },
  #################
  inject: ['inject'],
  #################
  methods: {
    changeBg () {
      this.style.backgroundColor = 'green'
      this.$emit('change-color', 'green')
    }
  },
  props: {
    // innerHtml 文案
    title: {
      type: String,
      default: function () { return '暫未定義title' }
    },
    // 樣式
    styled: {
      type: Object,
      default: function () { return {} }
    }
  }
}

對於某些情況下，一個父元件可能擁有多個子元件，此時父元件的功能狀態可以通過provide: { inject: ‘test provide’ }傳遞，子元件中inject接受到的資料可以直接用this訪問

靜態屬性的傳遞

export const GlobelButton = {
  template: `
  <div>
      <slot name="first"></slot>
        <button type="button" :style="style"  @click="changeBg">
          {{title}}
        </button>
        {{inject}}
      <slot name="end"></slot>
  </div>
  `,
  created () {
    const styled = this.styled || {}

    if (!styled) return

    if (styled instanceof Object || JSON.stringify(styled) !== '{}') {
      for (const key in styled) {
        this.style[key] = styled[key]
      }
    }
  },
  data () {
    return {
      style: {
        backgroundColor: '#b50136',
        fontSize: '12px',
        color: '#fff'
      }，
      ##############
      attrs: this.$attrs
      ##############
    }
  },
  #################
  inheritAttrs: false
  #################
  inject: ['inject'],
  methods: {
    changeBg () {
      this.style.backgroundColor = 'green'
      this.$emit('change-color', 'green')
    }
  },
  props: {
    // innerHtml 文案
    title: {
      type: String,
      default: function () { return '暫未定義title' }
    },
    // 樣式
    styled: {
      type: Object,
      default: function () { return {} }
    }
  }
}

在開發過程中經常會出現父元件向孫子元件傳值，父元件向子元件傳遞多個靜態屬性，此時我們可以藉助$attrs來接受所有沒有在props中定義，但是父元件呼叫子元件確綁定了的值，同時為了使繫結值不出現在DOM渲染中，從而保證DOM樹的整潔，我們需要藉助：inheritAttrs: false

需要注意的是$attrs在beforeCreate中已經準備好了，並且不會進行響應式資料變化，所以傳遞的一定要是靜態屬性