Vue3.0：如何在父组件中调用ref的子组件方法以及如何在Vue的原型对象上全局实现自定义函数的封装。

1、问题1：如何在父组件中去调用子组件的方法

在使用vue3.0的时候，需要去调取子组件的方法去快速的解决需求，类似于在Vue2.x中的this.$refs去操作虚拟dom元素的方法，但是在Vue3.0中是没有this指向的，那么解决办法就是先将ref的值定义一个对象，其value值再指向是子组件component。
父组件：

上面展示的是我的部分的代码实现，代码逻辑是我将一个公共弹窗组件提出来，但是当把这个组件以子组件的方式引进去的时候，我想直接通过调用子组件的方法去实现弹出框的打开关闭。

截图.png

通过使用上面的方法，成功解决了这个问题。

问题2、如何在Vue的原型对象上全局的添加自定义方法

导入的elementUI的消息提示框:

• 新建一个utils文件目录，文件目录下添加一个global.js文件，然后这里面可以写一些自己的方法了

import { MessageBox, Message  } from 'element-ui';
export default {
    install(Vue,options){
        Vue.prototype.remove = function(params){
            MessageBox.confirm(params.content, params.tips || "提示", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                center:true,
                type: "error",
              })
                .then(() => {
                    params.fn && params.fn(params.id)
                    // if(params.fn){ params.fn()}
                    Message.success('删除成功!')
                })
                .catch(() => {
                    Message.error('已取消删除!')
                });
        }
    }
}

上面的代码，params是从外面传进来的参数，这个里面可以把值或者一些方法传进来都是可以的。

• main.js引入文件

import global from "@/utils/global.js";

Vue.use(global);

• 调用部分的代码

import { reactive, ref, defineComponent } from "@vue/composition-api";
import Dialog from "../../components/dialog/dialog.vue";
export default defineComponent({
  components: {
    Dialog,
  },
  setup(props, { root }) {
    // 行删除
    const handleDelete = (index, row) => {
      root.remove({
        content: "是否删除当前数据?",
        fn:handleRefresh,
        id:'012121231'
      });
    };
    // 删除后刷新表格数据
    const handleRefresh = (value) => {
      console.log('删除后的数据....',value);
    };
    return {
      handleDelete,
    };
  },
});

之后就不需要在每个组件内部写一段重复冗余的代码了，直接调用全局方法，然后把需要传入的参数带进去，就解决问题了。

截图.png