Vue--子组件相互传参
引用了
element
做按钮组件
父组件
创建子组件公用的空vue
变量,为pubVue
,并传给需要互相传参/互相调用方法的两个子组件
<template>
<div>
<btn-tools :pubVue="pubVue" />
<table-list :pubVue="pubVue" />
</div>
</template>
<script>
// 组件引用
import TableList from './components/table-list'
import BtnTools from './components/btn-tools'
import Vue from 'vue'
export default {
name: 'PDmaterialList',
components: { TableList, BtnTools },
data() {
return {
pubVue: new Vue()
}
}
}
</script>
子组件一 $emit发送事件
<template>
<div>
<el-button icon="el-icon-search" type="primary" @click="test" />
</div>
</template>
<script>
export default {
props: {
pubVue: {
type: Object
}
},
methods: {
test() {
console.log('方法派发')
this.pubVue.$emit('YOUR_EVENT_NAME', {
name: '张三'
})
}
}
}
</script>
子组件二 $on监听事件
<template>
<div>
<div>子组件二</div>
</div>
</template>
<script>
export default {
props: {
pubVue: {
type: Object
}
},
mounted() {
this.pubVue.$on('YOUR_EVENT_NAME', data => {
console.log('方法监听', data)
})
}
}
</script>
借鉴博客
vue 事件派发和监听 (两种方法)
vue2中$emit $on $off实现组件之间的联动,绝对有你想了解的
2020年10月28日
Vue--子组件相互传参的更多相关文章
- vue 父子组件相互传参
转自https://blog.csdn.net/u011175079/article/details/79161029 子组件: <template> <div> <di ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- vue 父子组件之间传参
父组件中有子组件 msg 为父组件向子组件传的内容, 子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- vue父子组件路由传参的方式
一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...
- 前台VUE的组件之间传参方式
路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...
- 【Angular】父组件监听子组件事件(传参)
Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目
随机推荐
- REDHAT 7.5beta 新推出的VDO功能
前言 关于VDO VDO的技术来源于收购的Permabit公司,一个专门从事重删技术的公司,所以技术可靠性是没有问题的 VDO是一个内核模块,目的是通过重删减少磁盘的空间占用,以及减少复制带宽,VDO ...
- Ceph 状态报警告 pool rbd has many more objects per pg than average (too few pgs?)
定位问题 [root@lab8106 ~]# ceph -s cluster fa7ec1a1-662a-4ba3-b478-7cb570482b62 health HEALTH_WARN pool ...
- 「NOIP2016」天天爱跑步 题解
(声明:图片来源于网络) 「NOIP2016」天天爱跑步 题解 题目TP门 题目 题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是 ...
- Android10_原理机制系列_AMS(ATMS)之应用的第一次启动的过程
概述 该篇基于Android 10的代码.在 AMS之AMS的启动---Android Framework(Android 10) 中已经介绍了,在Android 10中,activity的调度和管理 ...
- Linux 文本处理批量查找与替换
# 搜索含有特定字符串在某个目录并打印出文件名grep -rl "www.baidu.com" /data* -r, --recursive like --directories= ...
- Java基础—Java方法的调用
Java方法的调用个主要有以下几种: 1.调用非静态方法 2.调用静态方法 3.方法与方法之间的调用 (1).静态方法内部调用其他方法 (2).非静态方法内部调用 1.调用非静态方法: 非静态方法的调 ...
- 8、Spring Boot任务
1.异步任务 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spring ...
- 在FL Studio中如何使用Patcher插件
Patcher作为FL Studio20中自由度极高的一款插件,深受当今制作人的喜爱.其主要功能用于整合混音插件的输入与输出以及自定义控制器等功能.下面分几部分来介绍这个插件. Patcher的Map ...
- Word2 word输入公式+文字转表格
1.word中输入 =rand() -点击回车键-会随机生成一段文字-可用作排版练习/虚拟的文字排版设计 ##也可以为=rand(2,3)等,括号里可以随即填写其他数字,最后生成文字字数等不一样 2. ...
- 【移动自动化】【一】环境依赖:android sdk 环境配置(windows + linux)
Android自动化前提依赖 android sdk 模拟器: mumu模拟器, 逍遥模拟器 真机 windows 环境下Android SDK 配置 配置java环境 去官网下载jdk http:/ ...