Vue自定义指令 数据传递
2024-08-31 11:29:51
在项目开发过程中，难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 。关于directive的使用方式这里就不做过多的介绍了，Vue官方文档中说的还是听明白的。今天讲讲在使用Vue自定义指令过程中
1. 怎么数据传递到自定义指令中
2.怎么讲自定义指令中的数据传回到组件实例中
一、将数据传递到自定义指令中
<li class="table-columns" v-for="(tableHead,index) in getTableHeadList" :class="{'column-active':tableHeadIndex === index}" :key="index" :style="{width:tableHead.fieldWidth + 'px' }">
<div class="app-shrink-drag" v-dragWidth="index"></div>
</li>
这里只是传递了一个元素的索引进去，index 可以是其他类型的值 ，比如json对象 {index:1}
在指令中 通过binding.value 或者 binding.value.index 接收。
inserted(el, binding, vnode) {
二、讲自定义指令中的数据传递到组件实例中
自定义指令可以接收三个参数
el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下属性：name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
Vue 编译生成的虚拟节点包含当前组件实例对象（vnode.context），可以将自定义指令中修改过的数据，直接赋值实例中的对象属性 列如：
vnode.context.arr[index].name = 'xxx'。
目前只了解到可以这种方式 实现自定义指令和组件实例的相互传值，如果大神们还知道其他方式，欢迎留言。
最新文章
- table 边框
- 点击页面其它地方隐藏div所想到的jQuery的delegate
- jQuery属性，方法操作
- jquery记住密码，记住账号，自动登录
- oracle表空间相关SQL语句
- python——使用readline库实现tab自动补全
- .NET常用类库--苏飞合集
- Activity的各种功能封装
- C++求二叉树的最大高度差
- #include <stdint.h>
- ios inHouse 公布应用
- php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
- mysql 索引及索引创建原则
- LOJ 10160 - 「一本通 5.2 练习 3」周年纪念晚会 / 没有上司的晚会
- Redhat、Centos等系统配置进行网络配置的方法
- Android自己定义控件：进度条的四种实现方式
- PLSQL常用配置之窗口/版面保存、SQL格式化/美化、SQL注释\去掉注释等快捷键配置、登陆历史修改配置
- css -- 背景图片自适应屏幕大小
- linux -- ubuntu 脚本开机自启动
- 再论Splay