【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法

父组件（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>

子组件（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>
            &nbsp;
            {
   
   {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>

为什么我没有在父组件MyBlog.vue中引入子组件，也可以使用呢？

main.js

// 因为我在这注册了全局组件，这样当我使用这个组件的时候，就不用再次一一手动引入了
import DeleteModal from "./components/public/DeleteModal.vue";
Vue.component("DeleteModal", DeleteModal);