访问元素&组件

  1. 使用 $root 访问根实例；

  2. 使用 parent 访问父组件；

  3. 使用 refs 访问子组件：

  1. // html
  2. <base-input ref="usernameInput"></base-input>
  3. // js
  4. this.$refs.usernameInput
  1. 使用依赖注入向子组件暴露方法或属性
  1. // 父辈组件
  2. provide: function () {
  3.   return {
  4.     getMap: this.getMap
  5.   }
  6. }
  8. // 子辈组件
  9. inject: ['getMap']

在程序中监听事件

有三个与事件有关的 API：

  1. $on(eventName, value) ;

  2. $once(eventName, value) ;

  3. $off(eventName, value) 。

组件的循环引用

递归调用自身

这种情况要确保有一个递归的 终点 。

循环依赖

循环依赖: A 中有 B， B 中有 A 。

  1. 使用 Vue.component 注册，没有问题；

  2. 使用 webpack 等工具，有问题。解决方法:

    1. 在 beforeCreate 中添加组件
  1. beforeCreate() {
  2.     this.$options.components.B = require('./b.vue').default;
  3. }

ii. 使用异步加载

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

强制更新

使用 this.$forceUpdate() 强制更新。

v-once 创建静态组件

如果某个组件创建之后不需要在更新，可以使用 v-once 指令，使其只渲染一次，之后便缓存起来。

  1. <div v-once>
  2.   <h1>Terms of Service</h1>
  3.   ... a lot of static content ...
  4. </div>