vue 组件之间相互传值 父传子 子传父
1、父传子 把要传入的值放到父标签里 子组件使用props接收
父写法
子写法
2、子传父
子组件：
childrenOnclick() {
// 发布自定义事件
this.$emit("back", "我来了")//第一个参数是父组件中v-on绑定的自定义回调方法，第二个参数为传递的参数
}
父组件
<children-item v-on:back="handleParentClick"></children-item>
3、组件之间的通信
简单的通信使用vue实例解决，复杂的大型项目使用vuex状态管理。
1、新建一个vue实例来进行传递消息
var vm = new Vue(); 2、组件一发送消息
sendMsg: function () { //传参方法
console.log(555);
vm.$emit("eventBus","我是组件一");//定义方法名和要传输的数据
}
3、组件二接收消息
receive:function () {
vm.$on("eventBus",function (val) { //接收组件二的参数
console.log(val) //我是组件一
})
}
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child-component :message="msg" v-on:allback="updatea"></child-component>
<child-component2></child-component2>
</div>
<script>
var vm = new Vue(); //组件一 发送信息给父组件 、 接收组件二消息
Vue.component('childComponent',{
props:['message'],
template: `<div @click="sendMsg">{{ message }}</div>`,
data() {
return{
son:"我是你儿子"
}
},
mounted(){
this.receive()
}, methods:{
sendMsg: function () { //传参方法
console.log(555);
this.$emit('allback', this.son); //第一个参数是父组件中v-on绑定的自定义回调方法，第二个参数为传递的参数
},
receive:function () {
vm.$on("eventBus",function (val) { //接收组件二的参数
console.log(val)
})
}
}
});
//组件二 发送信息给组件一
Vue.component('childComponent2',{
props:['message'],
template: `<div @click="sendMsg">告诉大哥</div>`,
data() { //为什么不能写成data:{} 报错
return{
twoson:"我是你弟弟"
}
},
methods:{
sendMsg: function () { //传参方法
console.log(555);
vm.$emit("eventBus",this.twoson);//定义方法名和要传输的数据
}
}
});
new Vue({
el:'#app',
data:{
msg:"我是你爸爸"
},
methods:{
updatea:function (msg) {
console.log(6666)
this.msg=msg
}
}
})
</script>
</body>
</html>
vue 组件之间相互传值 父传子 子传父的更多相关文章
- VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
- vue 组件之间互相传值：兄弟组件通信
vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
- EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue父子组件之间相互传值
1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
随机推荐
- SWIT2019无线通信和信息技术国际研讨会（上海）
无线通信和信息技术国际研讨会(SWIT 2019)将于2019年6月29日至30日在中国上海皇冠晶品酒店举行.本次会议将讨论无线通信和信息技术问题.它致力于创造一个交流最新研究成果和分享先进研究方法的 ...
- MongoDB3.2新特性之文档验证
官方参考: https://docs.mongodb.org/master/core/document-validation/ 文档验证是3.2的重要新特性,添加验证条件的情形无非两种,一是在创建集合 ...
- fork()相关的源码解析
fork()的真正执行采用的是do_fork()函数,所以下文将从do_fork()函数对fork()进行源码解析.下图是do_fork()的源码函数设计: 从上图我们可以看到do_fork()涉及到 ...
- React-typescript-antd 常见问题
一.The key 'Accept' is not sorted alphabetically //tslint.json { "extends": ["tslint:r ...
- C# 数组在内存中的存储
C# 数组是引用类型,那么在内存中是如何存储的呢? 在VS中调试C#程序,如何查看内存.寄存器.反汇编 在这篇文章里看到了如何在VS 中查看内存 先断点打在数组创建后语句那里,点debug->W ...
- NuGet的简单使用
什么是NuGet? NuGet(读作New Get)是用于微软.NET开发平台的软件包管理器,是一个Visual Studio的扩展.在使用Visual Studio开发基于.NET Framewor ...
- centos7 安装php7,报错cannot get uid for user nginx
- 【JavaScript】for循环小练习
1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...
- 菜鸟初学redis（二）
如果你的redis可以在myeclipse上运行小demo了,那么可以继续学习了 redis Java String 实例 string是redis最基本的类型,一个key对应一个value. str ...
- DataGridView上下键事件获取到的是上次停留行的内容
DataGridView上下键事件 在DataGridView中,通过上下键将选中行的内容返回, 问题: 通过上边的方法总是获取到上次停留行的内容,不是当前选中行的内容. winform的项目,使用C ...