Vue高级用法

本文主要介绍Vue的高级用法

$options

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

使用代码如下:

1
2

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

$attr

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

使用代码如下:

1
2
3
4

<input v-bind="$attrs" v-bind:value="value"> //base-input子组件

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

$listeners

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

使用代码如下:

1
2
3
4

<input v-on="$listeners"> //base-input子组件

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

model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。

使用代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})

inheritAttrs

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。

注:这个选项不影响 class 和 style 绑定。

使用代码如下:

1
2
3
4
5

Vue.component('child', {
inheritAttrs: true
// ...
})

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>]
扫一扫,请老师喝水