父组件(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);

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

  1. vue组件父子组件之间传递数据

    举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  3. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  4. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  5. JS多个函数之间传递参数问题

    JS多个函数之间传递参数的一个重要思想是在页面定义一个隐藏域,当第一个函数请求到数据时候修改隐藏域的值,第二个函数用jQuery的选择器选择页面中隐藏域的值. 比如: 页面中定义一个隐藏的页号. &l ...

  6. mvc中view与controll之间传递参数时,可以使用url进行传递

    mvc中view与controller之间传递参数时,可以使用url进行传递,但是在url的地址中需要加上“id=123”这样的东西才行. 具体如代码: window.location.href = ...

  7. JSP页面之间传递参数的方法有哪些?

    JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接

  8. ASP.NET网页之间传递参数与值

    ASP.NET网页之间传递参数与值,方法很多,可以使用Application,Cookie,Session,或是Querystring等等.由于Insus.NET开发的程序中,多数是在后台之间进行参数 ...

  9. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

随机推荐

  1. js 表面学习 - 认识结构2

    单行注释以 // 开头. 多行注释以 /* 开头,以 */ 结尾. 任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略. JavaScript 数据类型 JavaScript 变量 ...

  2. 使用Playbook批量部署多台LAMP环境

    1. 安装ansible yum install epel-release -y yum install ansible -y Playbook是一个不同于使用ansible命令行执行方式的模式,功能 ...

  3. MYSQL中IF IN语句

    以下代码摘自后台管理系统中的一部分SQL语句: 当取数状态为1或2时,才展示取数时间,否则,取数时间展示为空 当申报状态为2.3.4或5时,才展示申报时间,否则,申报时间展示为空 select A.Q ...

  4. Java.稀疏数组

    package array; public class demo06 { public static void main(String[] args) { //创建一个二维数组 11*11 int[] ...

  5. Go 接口:深入内部原理

    接口的基本概念不在这里赘述,详情请看第十六章:接口 nil 非空? package main func main() { var obj interface{} obj = 1 println(obj ...

  6. DP问题大合集

    引入 动态规划(Dynamic Programming,DP,动规),是求解决策过程最优化的过程.20世纪50年代初,美国数学家贝尔曼(R.Bellman)等人在研究多阶段决策过程的优化问题时,提出了 ...

  7. 2022-7-9 第五小组 潘堂智 html学习笔记

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  8. 1000-ms-HashMap 线程安全安全问题

    问题: HashMap是否是线程安全 详解 http://www.importnew.com/21396.html 有源码分析 和代码性能比较 CHM性能最好 HashMap不是线程安全的:Hasht ...

  9. 【Java线程池】 java.util.concurrent.ThreadPoolExecutor 分析

    线程池概述 线程池,是指管理一组同构工作线程的资源池. 线程池在工作队列(Work Queue)中保存了所有等待执行的任务.工作者线程(Work Thread)会从工作队列中获取一个任务并执行,然后返 ...

  10. node.js操作数据库

    var sys = require('sys'); var Client = require('mysql').Client; var client = new Client(); client.us ...