关于前端:vue自定义指令通过data进行数据传递

 最近有个我的项目须要用指令来实现按钮权限，故利用 vue 的自定义指令来实现此性能。在应用指令的时候遇到个问题须要把指令外面的值传递到外层组件，查阅官网文档发现举荐应用 dataset 来进行数据传递，故利用上面办法实现数据传递。

1. 在对应元素上自定义属性

<Row
                 class-name="add-group"
                    :gutter="24"
                    type="flex"
                    justify="start"
                    data-test="true"
                    v-permission="[' 增加分组 ']"
                >
                    <Col span="17">
                        <Input
                            maxlength="20"
                            placeholder="请输出分组名称"
                            v-model="groupName"
                        ></Input>
                    </Col>
                    <Col span="7" class="add_btn">
                        <Button
                            type="primary"
                            :loading="loadingBtn"
                            @click="addGroup"
                            > 增加分组 </Button
                        >
                    </Col>
                </Row>

2. 在自定义指令中扭转 dataset 所自定义属性的值

 if (widgets) {var sWidget = widgets.filter((w) => {return (w.name === binging) && (w.authorised);
        });

        if (sWidget.length === 0) {el.parentNode && el.parentNode.removeChild(el);
            el.dataset.test = false;
        } else {el.dataset.test = true;}
    }

3. 在父集页面中应用更新后的值

   e.contextmenu = $('.add-group').data('test');

通过以上 3 步就能够实现执行完自定义指令中的相干逻辑后更新值来触发父集页面的相干操作。