1、问题1：如何在父组件中去调用子组件的方法
在使用vue3.0的时候，需要去调取子组件的方法去快速的解决需求，类似于在Vue2.x中的this.$refs去操作虚拟dom元素的方法，但是在Vue3.0中是没有this指向的，那么解决办法就是先将ref的值定义一个对象，其value值再指向是子组件component。
父组件：
<script>
// import Dialog from "@/components/dialog/dialog.vue";
import { reactive, ref, defineComponent } from "@vue/composition-api";
import Dialog from "../../components/dialog/dialog.vue";
export default defineComponent({
components: {
Dialog,
},
setup(props, { root }) {
const dialog = ref(null);
// 编辑操作
const handleEdit = (index, row) => {
dialog.value.open(row);
};
}
子组件：
<script>
import { reactive, ref, defineComponent } from "@vue/composition-api";
export default defineComponent({
setup(props, { root }) {
const dialogTableVisible = ref(false);
// 方法
const open = () => {
dialogTableVisible.value = true;
};
return {
dialogTableVisible,
open
};
},
});
</script>
上面展示的是我的部分的代码实现，代码逻辑是我将一个公共弹窗组件提出来，但是当把这个组件以子组件的方式引进去的时候，我想直接通过调用子组件的方法去实现弹出框的打开关闭。
截图.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
