Vue官方文檔筆記（二）

23、$refs是什麼東東？

　　通過在標簽上設置ref屬性，然後在Vue實例方法中可以通過$refs拿到這些標簽，如：

<input ref="input">

methods: {
  focus: function () {
    //拿到文本框標簽，調用其獲取焦點方法
    this.$refs.input.focus()
  }
}

24、對於多級嵌套組件，後代組件如何拿到父級或祖父級，設置更高級別的組件的數據或方法？

　　使用依賴註入。

provide: function () {
  return {
    getMap: this.getMap
  }
}

　　然後在任何後代組件里，我們都可以使用inject 選項來接收指定的我們想要添加在這個實例上的屬性：

inject: ['getMap']

• 通過$on(eventName, eventHandler) 偵聽一個事件
• 通過$once(eventName, eventHandler) 一次性偵聽一個事件
• 通過$off(eventName, eventHandler) 停止偵聽一個事件

    先看一個示例：

mounted: function () {
    //Pikaday是一個第三方日期選擇器的庫。這裡是將這個日期選擇器附加到一個輸入框上，最後掛載到DOM上
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

    //設置一次性的偵聽事件，在組件銷毀之前，銷毀這個日期選擇器
  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}

26、如果組件之間出現了互相引用，如何處理？

       先看一個示例：

　    組件<tree-foler>的模板是這樣的：

<p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>

    另外一個組件<tree-folder-contents>的模板是這樣的：

<ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>

　　這兩個組件互相引用，導致出現了迴圈引用。這種情況如何去解決呢？

　　假設這兩個組件<tree-folder>是父組件，<tree-folder-contents>是子組件，則產生問題的是子組件<tree-folder-contents>， 因此我們在生命周期鉤子beforeCreate裡面去註冊子組件

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

　　這樣問題就解決了。