7x3 精读Vue官方文档 - 组件实例

Mottle
2,470 阅读3分钟

精读 Vue 官方文档系列 🎉

组件实例 的方法与属性。

下面来直观获取一个组件实例—— this。

let that;
const vm = new Vue({
    mounted(){
        that = this;
    }
});
vm === that;

组件实例 - 属性

$data

获取当前 Vue 实例的响应式数据。 Vue 实例代理了对其 property 的访问，所以你可以直接通过 this 访问。

如果通过私有前缀添加的受保留的成员属性，依然需要通过 $data.property 方式访问。

$props

获取当前组件接收到的所有 props 。Vue 实例代理了对其 property 的访问，所以你可以直接通过 this 访问。

$el

获取当前组件实例的根元素。

$options

获取当前 Vue 实例上的自定义选项。

const customFilters = {};
new Vue({
  customFilters,
  created:function(){
    this.$options.router;
    this.$options.customFilters
  }
})

$parent

获取当前组件实例的父实例。父实例也可以通过组件的 parent 选项进行手动指定。

$root

获取 Vue 应用的根实例。

$children

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。

$slots

用来访问当前组件接收到的所有插槽内容，值是一个对象，对象成员的 key 便是具名插槽的名称，如果没有指定具名插槽，则默认的插槽名称为 default。

this.$slots.default; //获取默认的插槽内容。
this.$slots.header; //获取名称为 header 的插槽内容。

$scopedSlots

用来访问当前组件接收到的所有插槽内容, 值是一个对象，对象成员的 key 便是具名插槽的名称，与普通 $slots 不同的是，对象成员的 value 则是一个函数，通过执行这些函数并向其中传参，用来返回实际的插槽内容，而这就是作用域插槽的核心点，如何从组件内部向组件外部传递数据的关键。

如果没有指定具名插槽，则默认的插槽名称为 default。

this.$scopedSlots.default({props:this.props});

$refs

值是一个对象，保存所有绑定过 ref Attribute 的 DOM 元素对象和组件实例。

<a ref="anchor">Anchor</a>

this.$refs.anchor;

$isServer

当前 Vue 实例是否运行于服务器。

$attrs

获取当前组件绑定的所有非 props 的 attribute，值是一个对象。 它可以通过 v-bind="$attrs" 一次性的传入内部组件——这在创建更高层次的组件时非常有用。

注意，对 class 与 style 并无影响。

$listeners

包含了父作用域中的 (不含 .native 修饰符的) v-on 事件监听器。值是一个对象。 它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

组件实例 - 方法

$watch()

现在监听数据变动，除了使用组件的 watch 选项，还可以选择组件实例的 $watch 方法。

vm.$watch(expOrFn, callback [,options]) 接收三个参数:

  • expOrFn : 要监听的Vue实例上的表达式或者是监听一个函数计算结果的变化。
  • callback : 监听变动时触发的回调，它接收两个参数，分别是 newValue 与 oldValue。
  • options : 配置项，可以提供更高级的监听配置，例如 immediate 以及 deep 等，这与组件的 watch 选项没有什么不同。
const unwatch =  vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

// 之后取消监听
unwatch();

vm.$watch 返回一个取消观察函数，用来停止触发回调：

注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

$set()

为组件实例的可嵌套响应式对象动态加入响应式成员，并确保组件的视图可以响应式更新。 这是全局 Vue.set 的别名。

$delete()

删除组件实例的响应式对象成员。 这是全局 Vue.delete 的别名。

组件实例 - 事件

$on()

向当前组件实例绑定一个自定义事件，事件回调函数可以接收事件触发时传入的所有事件参数。

$on 方法绑定的事件可以由 $emit 触发。

const handler = function (msg) {
  console.log(msg)
};

vm.$on('test', handler);
vm.$emit('test', 'hi')
// => "hi"

$once()

与 $on 使用方式相同，只是通过 $once绑定的自定义事件，只会触发一次，触发后就会被移除。

$off()

移除自定义事件。

vm.$off(); //如果没有提供参数，则移除所有的事件监听器；
vm.$off('test'); //如果只提供了事件，则移除该事件所有的监听器；
vm.$off('test', handler); //如果同时提供了事件与回调，则只移除这个回调的监听器。

$emit()

触发当前实例上的事件。附加参数都会传给监听器回调。

组件实例 - 生命周期

$mount()

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

这个方法返回实例自身，因而可以链式调用其它实例方法。

$forceUpdate()

迫使 Vue 实例重新渲染。

注意它影响范围只有它自身与其插槽接收的子组件。

$nextTick()

将回调延迟到下次 DOM 更新循环之后执行。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

$destory()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

avatar
文章
阅读
粉丝