Parent component (MyBlog.vue)
<template>
<!-- Delete Modal -->
<!-- 注意:这里的@deleteBlog中的deleteBlog要和fatherMethod的值deleteBlog一致 -->
<!-- 1.fatherMethod传给子组件,子组件再将这个值传给this.$emit() -->
<!-- 2.$emit()方法根据fatherMethod的值来执行父组件中的方法,这里是deleteBlog -->
<DeleteModal
@deleteBlog="deleteBlog"
:fatherMethod="fatherMethod"
:deleteTitle="deleteTitle"
/>
<!-- Delete Modal -->
</template>
<script>
export default {
data() {
return {
fatherMethod: "deleteBlog",
deleteTitle: "删除动态?",
}
},
methods: {
async deleteBlog() {
const {
data: res } = await this.$http.delete("deleteBlog", {
data: {
blogId: this.selectBlog._id }
});
if (res.meta.status !== 200) {
return this.$message.error(res.meta.msg);
}
this.getUserBlogs();
this.$message.success(res.meta.msg);
}
}
}
</script>
Subcomponent (DeleteModal.vue)
<!-- 用的是Bootstrap的Modal组件 -->
<template>
<div
class="modal fade"
id="deleteModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-sm modal-dialog-left">
<div class="modal-content">
<div class="modal-header justify-content-center p-2 border-bottom-0">
<h5 class="modal-title" id="exampleModalLabel">
<i class="fas fa-exclamation-triangle" style="color: rgb(220,53,69);"></i>
{
{this.deleteTitle}}
</h5>
</div>
<div class="modal-footer justify-content-center p-0 border-top-0">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
<button
type="button"
class="btn btn-danger btn-sm"
data-bs-dismiss="modal"
@click="Delete"
>确定</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["fatherMethod", "deleteTitle"],
methods: {
Delete() {
// 参数是String类型,是父组件中的方法,这里是deleteBlog()
this.$emit(this.fatherMethod);
}
}
};
</script>
Why didn't I introduce the child component in the parent component MyBlog.vue, and it can also be used?
main.js
// 因为我在这注册了全局组件,这样当我使用这个组件的时候,就不用再次一一手动引入了
import DeleteModal from "./components/public/DeleteModal.vue";
Vue.component("DeleteModal", DeleteModal);