Vue官方文档笔记（二）

<input ref="input">

methods: {
  focus: function () {
    //拿到文本框标签，调用其获取焦点方法
    this.$refs.input.focus()
  }
}

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

inject: ['getMap']

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()
    })
  }
}

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

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

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

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