vue自定义指令通过data-*进行数据传递

Posted 2021-09-28 吴吴吴

最近有个项目需要用指令来实现按钮权限，故利用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步就可以实现执行完自定义指令中的相关逻辑后更新值来触发父集页面的相关操作。