知道vue组件同级传值吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>同级传递</title>
</head>
<body>
<div id="app">
<son1></son1>
<son2></son2>
</div>
</body>
<script src="./vue.js"></script>
<script>
let nullVm=new Vue();
var vm=new Vue({
el:"#app",
components:{
"son1":{
data(){
return {
mes:[1,2]
}
},
template:"<p @click='get'>send</p>",
methods: {
get(){
nullVm.$emit("s1",this.mes)
}
},
},
"son2":{
template:"<p><p>",
mounted(){
// let that=this;
nullVm.$on("s1",function (params) {
console.log(params)
})
},
}
}
})
/*
一般同级传递都是指的是子组件与子组件之间的传递，因为父亲只有一个，那就是Vue实例。
如果想把son1的数据传给son2,
这里需要创建一个空实例Vue对象,然后利用事件方法e m i t ( " 自 定 义 参 数 名 " ， " 需 要 传 递 的 数 据 " ) ， 然 后 将 空 对 象 这 个 emit("自定义参数名"，"需要传递的数据")， 然后将空对象这个emit("自定义参数名"，"需要传递的数据")，然后将空对象这个emit(),整体写在函数内。这样他的数据就会传出去了。谁来接受呢？另一个同级组件需要用钩子函数mounted，这个钩子函数的意思是初始化页面完成后，再对html的dom节点进行一些需要的操作。
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119809365
知道vue组件同级传值吗？的更多相关文章
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- Vue组件间传值 v-model
使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我 ...
- vue 组件与传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- vue 组件间传值方式
/* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...
- 第七十四篇：Vue组件父子传值
好家伙, 1.组件之间的关系 在项目开发中,组件之间的最常见关系分为如下两种: (1)父子关系 (2)兄弟关系 2.父子之间的数据共享 (1)父->子共享数据 父组件向子组件共享数据需要使用自定 ...
- vue组件通信传值——Vuex
一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...
- vue组件间传值详解
1.父传子----传值要点: <1> 在组件注册的时候必须要使用 return 去返回 data对象;
- vue 组件相互传值
Part.1 传值几种方式 在写项目时,遇到组件传值问题,特此记录一波~~~ (1) 父传子 (2) 子传父 (2) 兄弟组件传值 Part.2 父传子 顾名思义,就是父组件传值给子组件 子 ...
随机推荐
- Spring Framework 学习笔记——核心技术之Spring IOC
Spring Framework 官网文档学习笔记--核心技术之Spring IOC 官方文档 spring-framework-5.3.9 1. Spring Framework 核心技术 1.1 ...
- 《手把手教你》系列基础篇（八十七）-java+ selenium自动化测试-框架设计基础-Log4j 2实现日志输出-上篇（详解教程）
1.简介 Apache Log4j 是一个非常古老的日志框架,并且是多年来最受欢迎的日志框架. 它引入了现代日志框架仍在使用的基本概念,如分层日志级别和记录器. 2015 年 8 月 5 日,该项目管 ...
- sql语句——DML
DML:增删改表中数据 1. 添加数据: * 语法: * insert into 表名(列名1,列名2,...列名n) values(值1,值2,...值n); * 注意: 1. 列名和值要一一对应. ...
- 安全开发运维必备，如何进行Nginx代理Web服务器性能优化与安全加固配置，看这篇指南就够了
本章目录 1.引言 1.1 目的 1.2 目标范围 1.3 读者对象 2.参考说明 2.1 帮助参考 2.2 参数说明 3.3 模块说明 3.服务优化 3.1 系统内核 3.2 编译优化 3.3 性能 ...
- Python学习笔记: 用pprint更漂亮的打印数据
pprint是一个标准库,它提供了pprint()函数 ,用来打印复杂数据时更漂亮 >>> from pprint import pprint >>> data = ...
- 9.1 Linux存储结构和文件系统
1. 存储结构 Linux系统中的一切文件都是从"根"目录(/)开始的,并按照文件系统层次标准(FHS)采用倒树状结构来存放文件,以及定义了常见目录的用途. 目录名称 应放置文件的 ...
- springmvc03-restful和控制器
一.控制器Controller 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现. 控制器负责解析用户的请求并将其转换为一个模型. 在Spring MVC中一个控制器类可以包含 ...
- vue-mobile-template 前端开源框架
开源项目的由来 某天因公司业务需求,想寻找一款H5移动端的模板进行二次开发.但搜遍整个HUB都没法找到合适的空模板进行二次开发,所以心血来潮,于是有了 vue-mobile-template . 介绍 ...
- Python求解线性规划——PuLP使用教程
简洁是智慧的灵魂,冗长是肤浅的藻饰.--莎士比亚<哈姆雷特> 1 PuLP 库的安装 如果您使用的是 Anaconda[1] 的话(事实上我也更推荐这样做),需要先激活你想要安装的虚拟环境 ...
- MySQL事务基本使用
目录 1 事务概述 1.1 事务的支持情况 1.2 事务的特性 1.3 事务的状态 2 使用事务 2.1 显示事务 2.2 隐藏事务 3 事务隔离等级 3.1 数据并发问题 3.2 事务隔离等级介绍 ...