高级组件

发表于 更新于 分类于

$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处
使用代码如下：

1
this.$options.data(); // 获取当前 vue 实例化的初始数据 data

$attr

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。
使用代码如下：

1
2
3
4
5
6
7
8
9
<!-- base-input 子组件 -->
<input v-bind="$attrs" v-bind:value="value" />

<!-- 父组件调用 -->
<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。
使用代码如下：

1
2
3
4
5
<!-- base-input 子组件 -->
<input v-on="$listeners" />

<!-- 父组件调用 -->
<base-input v-on:focus.native="onFocus"></base-input>

v-slot

提供具名插槽或需要接收 prop 的插槽。
使用代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- MyFooter 组件 -->
<template>
  <div>top</div>
  <div>
    <slot name="footer" />
  </div>
</template>

<!-- 父组件调用 -->
<MyFooter>
  <template v-slot:footer>
    <!-- footer 具名插槽 -->
    <div>list</div>
  </template>
</MyFooter>