vue封装全局组件,this.$调用,带方法回调

最新推荐文章于 2023-12-07 10:29:57 发布
最新推荐文章于 2023-12-07 10:29:57 发布
阅读量1k 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48074947/article/details/133018959
版权

vue封装全局组件,this.$调用,带方法回调

  1. 弹窗组件代码封装
<template>
  <a-config-provider :locale="locale">
    <a-modal
      :title="type == 3 ? '选择岗位' : '选择用户'"
      :visible="visible"
      :width="1400"
      :destroyOnClose="true"
      @ok="sureBtnFn"
      @cancel="cancelBtnFn"
      :zIndex="9999"
      okText="提交"
      cancelText="取消">
      <div class="main_box_page">
        <div class="main_box_page_left">
          <selectTree
            :orgInfo="treeOrgInfo"
            @selectInfo="selectInfo"
            :showChildren="showChildren"
            :orgTreeList="orgTreeList"
            ref="modalTree"></selectTree>
        </div>
        <div class="main_box_page_right">
          <!--  岗位与用户-->
          <a-descriptions title="部门"></a-descriptions>
          <a-row type="flex" :gutter="[8, 8]" class="row-box">
            <a-col :md="4" :sm="24" class="part-tree">
              <a-tree
                showLine
                :selectedKeys="depart"
                @select="partSelect"
                :tree-data="departList"
                :replaceFields="{ title: 'name', key: 'id', children: 'children' }">
              </a-tree>
            </a-col>
            <!-- 岗位树 -->
            <a-col :md="4" :sm="24" class="menu-list">
              <a-checkbox-group v-if="type == 3" v-model="group" name="checkboxgroup">
                <div v-for="item in stationList" :key="item.id" class="check-group">
                  <a-checkbox :value="item.id + '_' + item.stationName"> </a-checkbox
                  ><span @click="getUser(item)"> {{ item.stationName }}</span>
                </div>
              </a-checkbox-group>
              <a-menu v-else v-model="current" mode="inline" @select="selectStation">
                <a-menu-item key="0">全部用户</a-menu-item>
                <a-menu-item
                  :value="item.remark"
                  :title="item.stationName"
                  v-for="item in stationList"
                  :key="item.id"
                  >{{ item.stationName }}</a-menu-item
                >
              </a-menu>
            </a-col>
            <!-- 用户 -->
            <a-col :md="24 - 8" :sm="24">
              <!-- 表头栏 -->
              <a-row>
                <a-col :span="8">
                  <a-descriptions v-if="stationInfo.stationName">
                    <a-descriptions-item label="岗位">
                      {{ stationInfo.stationName }}</a-descriptions-item
                    >
                  </a-descriptions>
                  <span v-else>全部用户</span>
                </a-col>
                <a-col :span="4">
                  <div v-if="type != 3 && showSelf">
                    <a-descriptions>
                      <a-descriptions-item label="流程发起人">
                        <a-checkbox v-model="isSelf"></a-checkbox>
                      </a-descriptions-item>
                    </a-descriptions>
                  </div>
                </a-col>
                <a-col :span="12">
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      justify-content: flex-end;
                      margin-bottom: 8px;
                    ">
                    <a-space :size="15">
                      <a-input-search
                        v-model.trim="queryParam.info"
                        placeholder="查找用户"
                        style="width: 200px"
                        @search="onSearch"
                        allowClear />
                    </a-space>
                  </div>
                </a-col>
              </a-row>
              <!-- Start table  -->
              <a-table
                bordered
                :rowKey="
                  (record, index) => {
                    return record.userId;
                  }
                "
                ref="table"
                size="middle"
                :pagination="ipagination"
                :columns="columns"
                :dataSource="orgUserList"
                :loading="loading"
                :rowSelection="
                  type == 3
                    ? null
                    : {
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange,
                        type: type == 1 ? 'radio' : 'checkbox'
                      }
                "
                @change="handleTableChange"
                :scroll="{ y: 465 }">
              </a-table>
              <!-- End table  -->
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
  </a-config-provider>
</template>

<script>
  import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
  import selectTree from "./selectTree";
  export default {
    components: {
      selectTree
    },
    data() {
      return {
        //可传参数
        type: 1, //类型(1单选人2多选人3岗位)默认单选必填
        showChildren: false, //是否展示子层级默认不展示
        orgTreeList: null, //组织树可选默认展示当前项目层级
        treeOrgInfo: {}, //展示项目树的信息(默认当前项目的信息)
        limit: "", //最多勾选的数量
        noEmpty: false, //是否默认必须勾选(默认不必)
        showSelf: false, //是否展示流程发起人勾选框(默认不展示,仅流程配置的时候展示)
        //不可传参数
     
      };
    },
    methods: {
      // 初始化函数
      init() {
        this.visible = true;
        //
        if (this.showSelf) {
          this.isSelf = this.selectionRows.some((item) => item.userId === "${startUserId}");
        }
        //可以通过this.$xx的方式调用之后通过.then（表示确定）或.catch（表示取消）来表示是取消还是成功
        return new Promise((resolve, resject) => {
          this.promiseResult = { resolve, resject };
        });
      },
      // 确定函数
      sureBtnFn() {
        console.log(this.selectionRows, "选中的人");
        console.log(this.group, "选中的组");
        if (this.noEmpty && this.selectionRows.length == 0 && this.group.length == 0) {
          return this.$message.warning("请选中数据后提交!");
        }
        let selectData = this.type == 3 ? this.group : this.selectionRows;
        this.success(selectData);
        //执行销毁组件实例函数
        this.destruction();
      },
      // 取消函数
      cancelBtnFn() {
        // this.promiseResult.resject();
        this.cancel();
        this.destruction();
      },
      // 销毁函数
      destruction() {
        this.visible = false;
        //   销毁实例
        this.$destroy(true);
        //将组件从body中移除
        this.$el.parentNode.removeChild(this.$el);
      },
</script>
<style scoped lang="less">
 
</style>

2、简单分析
现在我们有了一个公共的组件和样式，那么我们就要想，要怎么实现再任意地方使用this. $xxx的方式调用呢。既然通过this. $xxx的方式调用那么我们会想到我们什么时候这样用过这种方式去调用呢？
vuex中我们使用过，全局事件总线我们也使用过。那么我们就必须利用一个vue的一个重要的内置关系VueComponent.prototype.proto===Vue.prototype
那么我就需要把我们组件的一些方法放到Vue的原型上边。只有这样才能实现全局通过this. $xxx的方式调用
使用过vuex的我们都知道，我们需要在创建vm之前使用Vue.use(vuex)的方式才能在全局使用，里边复杂的东西我也不太清楚，不过能确定的一点就是，他里边一定有一个Vue.prototype. $ xxx=xxx，还有就是vuex里边肯定有一个install函数,而且vue会自动调用这个函数
3.Vue.use之前的准备
既然知道了这些，我们就可以利用这些东西写一个配置文件，用于最后的Vue.use最后就能全局使用了，这个是js文件而非vue文件

// 引入弹窗组件
import mySelectUser from './selectUser.vue'
//引入Vue
import Vue from 'vue'

// 创建组件构造函数
const hint = Vue.extend(mySelectUser)
// 注册全局组件
Vue.component('htlSelectUser', hint)
// 创建函数(传入配置对象)
const selectUserFn = function (options) {
    let data = {
        treeOrgInfo: {
            orgId: (options && options.treeOrgInfo && options.treeOrgInfo.orgId) || this.$store.state.project.orgId,
            orgName: (options && options.treeOrgInfo && options.treeOrgInfo.orgName) || this.$store.state.project.orgName,
            orgType: (options && options.treeOrgInfo && options.treeOrgInfo.orgType) || this.$store.state.project.orgType
        },
        type: (options && options.type) || 1,
        limit: (options && options.limit) || '',
        noEmpty: (options && options.noEmpty) || false,
        showChildren: (options && options.showChildren) || false,
        selectionRows: (options && options.type != 3) ? (options && options.selectData) || [] : [],
        selectedRowKeys: (options && options.type != 3) ? ((options && options.selectData) ? options.selectData.map(e => e.userId) : []) || [] : [],
        group: (options && options.type == 3) ? ((options && options.selectData) ? options.selectData.map((e) => `${e.userId}_${e.realname}`) : []) : [],
        showSelf: (options && options.showSelf) || false
    }//参数配置

    // 实例化组件对象
    const Instance = new hint({
        data: data,
        methods: {
            //方法配置
            success(data) {
                if (options && options.showSelf) {
                    options.success(data, this.isSelf)
                } else {
                    options.success(data)
                }
            },
            cancel(data) {
                options.cancel && options.cancel(data)
            },
        }
    })
    // 挂载
    let vm = Instance.$mount()
    // 添加到body里边
    document.body.appendChild(vm.$el)
    //调用的是弹窗组件的init方法

    return vm.init()
}
// 暴露
export default {
    install: (Vue) => {
        Vue.prototype.$htlSelectUser = selectUserFn // 挂到Vue的原型上使用
    }
}

4.main文件的配置及组件的使用

import Vue from 'vue'
import App from './App.vue'
//引入上一步写的js文件
import htlSelectUser from '@/components/htlComps/selectUser/index'
//使用
Vue.use(htlSelectUser )

new Vue({
  render: h => h(App),
   mounted() {
   //我们可以在这里输出的this的原型上看到我们自己定义的方法$hintFn
    console.log('this', this);
  },
}).$mount('#app')

5.使用实例

```vue
<template>
  <div>
    <button @click="show">单选</button>
    <button @click="show1">多选</button>
    <button @click="show2">选择岗位</button>
    <div>选中的数据:{{ SelectData }}</div>
  </div>
</template>

<script>
  export default {
    name: "SelectUser",
    data() {
      return {
        SelectData: []
      };
    },
    methods: {
      show() {
        this.$htlSelectUser({
          type: 1, //类型(1单选人2多选人3岗位)默认单选必填
          selectData: this.SelectData, //回显数据
          showChildren: true, //是否展示子层级默认不展示
          treeOrgInfo: {
            orgId: "so22120617500200000410135",
            orgName: "哈哈哈",
            orgType: 2
          }, //展示项目树的信息(默认当前项目的信息)
          orgTreeList: null, //组织树可选默认展示当前项目层级
          success: (data) => {
            console.log("点击了确定", data);
            this.SelectData = data;//深层对象赋值用$set赋值
          },
          cancel: () => {
            console.log("点击了取消");
          }
        });
      },
      show1() {
        this.$htlSelectUser({
          type: 2,
          selectData: this.SelectData,
          showChildren: true,
          success: (data) => {
            console.log("点击了确定", data);
            this.SelectData = data;
          },
          cancel: () => {
            console.log("点击了取消");
          }
        });
      },
      show2() {
        this.$htlSelectUser({
          type: 3,
          selectData: this.SelectData,
          success: (data) => {
            console.log("点击了确定", data);
            this.SelectData = data.map((item) => {
              let info = item.split("_");
              return { userId: info[0], realname: info[1] };
            });
          },
          cancel: () => {
            console.log("点击了取消");
          }
        });
      }
    }
  };
</script>

参数配置

参数类型必填说明
typestringY类型(1 单选人 2 多选人 3 岗位)默认单选
selectDataArreyY(必传,数据回显)
showChildrenBooleanN是否展示子层级,默认不展示
treeOrgInfoObjectN展示项目树的信息
orgTreeListArreyN组织树可选默认展示当前项目层级
limitNumberN限制选择的最大人数(默认不限制)
noEmptyBooleanN是否必勾选(默认不必)
showSelfBooleanN是否展示流程发起人勾选框(默认不选仅流程配置页面需要) 传True时, success多返回一个参数判断是否勾选的字段 isSelf
successFunctionY点击确定按钮回调
cancelFunctionN点击取消按钮回调
热心市民`
关注
Vue封装全局公共方法
qq_37635012的博客
02-20 445
有的时候，我们需要在多个组件里调用一个公共方法，这样我们就能将这个方法封装成全局的公共方法。
vuetify封装全局组件 通过this.xx()直接调用
liuchuangqiang的博客
03-18 1308
vuetify 全局组件 dialog toast modal
Vue的this.$方法
qq_60458298的博客
03-20 2246
- ref 写在标签上时：this.$refs.名字 获取的是标签对应的dom元素 ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用-->获取Vue实例关联的DOM元素；vue中也是允许进行dom操作的（但是不建议）注意this.$el关联的是真实Dom，所以需要在mounted渲染真实Dom之后才可以使用了获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）
vue中定义一些方法或者组件在全局调用
最新发布
weixin_72915006的博客
12-07 463
1.我们可以在plugins中自定义一下公共方法，将这些方法挂载到vue的实例上面，以供我们全局调用。当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件。7.如果想封装其他方法参照上述方法，新建一个js文件，在index.js里面引入，在main.js里面注册，然后就可以全局调用了（如对日期的封装等等）4.在index.js里面引用，vue提供install可供我们开发新的插件及全局注册组件等。我们在plugins文件中新建两个文件，index.js, modal.js,
Vue2.x实现this调用组件
liluo101的博客
03-04 793
长期以来，我都是通过父组件引入子组件的方式调用，比如一个Modal，一个Notice之类的，而很多UI框架都可以支持this.$xxx的方法调用展示，很羡慕，很自责，为啥我还在用这么low的方式？而且多个组件引入到父组件会造成层级过深，不利于渲染，而这种方式不仅优雅，而且可以直接将组件挂载到body里面，岂不是美滋滋 实现方法 1.一个Vue文件 <template> <div> this is count {{count}} th
Vue中在组件中单独使用this
青春木鱼的博客
12-20 1103
全局注册——Vue.prototype、Vue.component、Vue.ues；局部注册——components：{App，}
解决vue.js this.$router.push无效的问题
10-18
在Vue组件的方法中，this通常指向当前Vue实例，但如果没有正确绑定，或者在某些回调函数中，this的指向可能会改变。在上文提供的代码示例中，作者在使用回调函数时使用了self = this;来确保回调函数中的this能够指向...
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
10-15
在进行前端开发过程中，尤其是使用Vue.js框架时，会不可避免地遇到需要在多个组件间共享方法或者管理全局状态的场景。本文将重点介绍两个方面：一是如何在Vue项目中引用公共方法，二是如何通过Vuex中的this.$***mit...
vue教程之toast弹框全局调用示例详解
08-29
本文主要讲解了 Vue 教程之 Toast 弹框全局调用示例的实现方法，旨在帮助读者更好地理解 Vue 框架在弹框全局调用示例中的应用。 标题解释 标题 "Vue 教程之 Toast 弹框全局调用示例详解" 清楚地表明了本文的主要...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
vue 自定义全局方法,在组件里面的使用介绍
08-27
下面小编就为大家介绍一下vue 自定义全局方法,在组件里面的使用。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
11-20
全局路由守卫this.$vux.loading.hide()报错，访问不到this 解决办法 申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let vue = new Vue({ el: '#app', router, store, components: { App }, template: '' }) if判断防止第一次初始化报错 或者 let vue = new Vue
VUE全局this指向
程序员劝退师的博客
12-03 1832
前言 在很久很久之前我还是个菜鸡的时候，解决报错的时候，不幸看过一种关于this指向的写法，当时没记住，只知道有个这么个模糊的概念，然后今天晚上来了灵感，就写出来了，说到这个this指向问题，很多刚入行的前端同学应该多会碰到，那么今天就写一下关于全局this指向的代码，让我们的代码更加简洁。 传统写法 问题代码 <template> <div> <div @click="test">按钮</div> </div> &lt
vue子组件回调父类方法this.$emit()
u011086811的博客
03-16 2350
子组件有时需要想向父组件传值或者使用父组件方法 那我们就要用到this.$emit() //父组件-------------------------------------------------- <template> .... <子组件 :deta='deta' @回调方法="父类方法" ></子组件> </template> <script> methods: { 父类方法(回..
vue中的常用的this.$..
雨声学java
03-24 4249
this：普通函数的this指向vue实例对象(相当于dom对象相当于需document) 1. 路由跳转 this.$router.push() ： this.$router.back() 区别：使用this.$router.back()不可以使用 回退，跳转到上一个页面。 2.获取DOM元素 this.$refs 一般来讲，获取DOM元素，需document.querySelector（".input"）获取这...
vue 全局组件的两种使用方法
weixin_57246351的博客
08-23 1800
第一种 第一步,创建全局组件 比如在src/components/ArticleItem.vue 第二步导入main.js // main.js中导入全局组件 import ArticleItemOne from './components/ArticleItem.vue' Vue.component('ArticleItem', ArticleItemOne) 第三步:使用 任意组件导入使用 <template> <div> <ArticleItem>
vue封装全局组件
Lucky_girl_wan的博客
02-20 1670
需求：公司官网中需要点击“在线咨询”的时候弹出在线客服，在线咨询多个页面多个位置都有这个功能，为方便使用封装成全局组件，下方只为记录全局组件方法故组件代码简写。第一步：先写一个简单的组件，在components文件夹下面创建一个online.vue，把所需要的方法直接写在online.vue中。第二步：封装成全局组件 在config>plugins文件下面创建一个online.js。第三步：在main.js中全局引入全局组件online。第四步：直接使用全局组件的方法，避免多次引用组件。
vue组件添加全局方法_如何通过全局方法使用Vue.use()组件
weixin_32304579的博客
01-30 1757
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下简介Vue.use( plugin )：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。当 install 方法被同一个插件多次调用...
Vue.js - 全局 this 复制备份
牧码的博客
09-08 685
let that = this // 错的 export default { mounted { that = this // 对的 } }
window.addEventListener("beforeunload", () =>里面如何操作this.$refs调取方法
05-25
如果需要在这里操作Vue组件中的方法，可以将需要调用的方法封装为一个全局方法，然后在`beforeunload`事件回调函数中直接调用该全局方法。示例如下： 首先在Vue实例上定义一个全局方法： ```javascript Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值