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