vue進階學習

此篇主要是個人對vue教程上第一遍未吃透的概念的理解

1 原生事件綁定到組件

在 Vue 中，對於原生元素（<div>、<button> 等）只能監聽原生事件（也就是 HTMLElement.addEventListener() 實現的效果）；而對於 Vue 自定義組件，默認只能監聽那個組件主動 $emit() 出來的自定義事件。
而使用native可以直接監聽組件根元素的原生事件(強調：監聽的是根元素的事件)；
所以如果組件的根元素不包含組件上原生事件(比如label標籤就沒有input事件)時就會出現靜默失敗，也就是官方引入$listeners屬性(包含該組件上所有監聽器)作爲替換native綁定的第二套方案的原因：
1）在子組件模板上使用 v-on=“xxx” 將所有的事件監聽器指向這個組件的某個特定的子元素
2）創建xxx的計算屬性：

computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 將所有的對象合併爲一個新對象
      return Object.assign({},
        // 我們從父級添加所有的監聽器
        this.$listeners,
        // 然後我們添加自定義監聽器，
        // 或覆寫一些監聽器的行爲
        {
          // 這裏確保組件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }

2 sync修飾符

用於父子組件某個數據的同步更新
<text-document v-bind:title.sync=“doc.title”></text-document>
等價於：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

this.$emit('update:title', newTitle)

tips: 數據不能使用表達式；v-bind.syns="doc"可以將對象doc的屬性拆散分別傳入，但不能直接字面量對象{title:doc.title}