Vue 注册自定义指令

发布时间：2023-04-18 15:11:45 所属栏目：教程来源：

导读：Vue 自定义指令和组件一样存在着全局注册和局部注册两种方式。全局注册的自定义指令可以在项目中的所有组件中使用，局部注册的指令只能在当前组件内部使用。接下来我们分步介绍全局指令和局部指令的注册方式。

全

Vue 自定义指令和组件一样存在着全局注册和局部注册两种方式。全局注册的自定义指令可以在项目中的所有组件中使用，局部注册的指令只能在当前组件内部使用。接下来我们分步介绍全局指令和局部指令的注册方式。

全局注册

我们可以通过调用 Vue.directive 的方式来定义全局指令，它接收两个参数：1. 指令名，2. 指令的钩子函数对象。
命名：

短横线：<my-directive>
驼峰式：<MyDirective> 使用驼峰命名指令时，首字母最好以大写字母开头。
钩子函数对象：指令的钩子函数对象我们将在下面段落 4 中详细介绍。

注意：注册指令时，指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上 v- 前缀。

// 注册
// 驼峰命名
Vue.directive('MyDirective', {/* */})
// 短横线命名
Vue.directive('my-directive', {/* */})
// 使用
<div v-my-directive></div>
下面我们注册一个全局指令 v-focus，该指令的功能是在页面加载时，使得元素获得焦点。

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<label>姓名：</label>
<input id="name" v-focus type="text"/>
</div>
<div>
<label>年龄：</label>
<input id="age" type="text"/>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>
代码解释：
JS 代码第 3-7 行，我们定义了指令 v-focus，定义 inserted 钩子函数，在节点被插入时获得焦点。
HTML 代码第 4 行，我们在 input 元素上使用指令，当页面打开时 id 为 name 的输入框会自动获取焦点。

局部注册

指令的局部注册和组件的局部注册类似，在实例的参数 options 中使用 directives 选项来注册局部指令，局部指令只能在当前这个实例中使用：

// 注册
// 短横线命名
{
directives: {
'my-directive': {
inserted: function (el) {
el.focus()
}
}
}
}
// 驼峰命名
{
directives: {
'MyDirective': {
inserted: function (el) {
el.focus()
}
}
}
}
// 使用
<div v-my-directive></div>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<label>姓名：</label>
<input v-focus type="text"/>
</div>
<div>
<label>年龄：</label>
<input type="text"/>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {}
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
})
</script>
</html>
代码解释：
JS 代码第 8-14 行，我们定义了局部指令 v-focus，定义 inserted 钩子函数，在节点被插入时获得焦点。
HTML 代码第 4 行，我们在 input 元素上使用指令，当页面打开时 id 为 name 的输入框会自动获取焦点。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!