vue组件间通信子与父
二、组件间通信（子组件传值给父组件）
通过事件的方式来完成数据的传输。
①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
methods:{
recvMsg:function(msg){
//参数msg就是子组件通过事件出来的数据
}
}
②绑定事件处理函数
事件一般情况 都是自定义事件
<child-component @myEvent="recvMsg"></child-component>
③在子组件触发事件
事件名，值
this.$emit('myEvent',myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数
总结：
在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信子传父</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</div>
<script>
//通过事件的方式传递
// 绑定 -- 触发
Vue.component("parent-component",{
data:function(){
return {
sonMsg:""
}
},
methods:{
//msg参数要拿子传递的值
recvMsg:function(msg){
console.log("父组件接收到子组件的数据"+msg);
this.sonMsg = msg; }
},
template:`
<div>
<h1>这是父组件</h1>
<p>子组件传来的数据为：{{sonMsg}}</p>
<hr/>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
Vue.component("child-component",{
methods:{
sendMsg:function(){
//来触发绑定给子组件的自定义方法
//this.$emit("customEvent");第一个参数触发
//this.$emit("customEvent");第二个参数传值
this.$emit("customEvent","哈哈哈哈");
},
},
template:`
<div>
<h1>这是子组件</h1>
<button @click="sendMsg">senToFather</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
:::在子组件中 放上一个input，点击按钮 把用户输入的内容发给父组件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>子与父之间的通信</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</div>
<script>
//创建父组件
Vue.component("parent-component",{
//data属性
data:function(){
return{
sonMsg:""
}
},
methods:{
recvMsg:function(msg){
this.sonMsg = msg
}
},
template:`
<div>
<h1>父组件</h1>
<h4>子组件传递的数据：{{sonMsg}}</h4>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
//创建子组件
Vue.component("child-component",{
data:function(){
return {
myInput:""
}
},
methods:{
sendMsg:function(){
this.$emit("customEvent",this.myInput);
}
},
template:`
<div>
<h1>子组件</h1>
<input type="text" v-model="myInput"/>
<button @click="sendMsg">发送</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue组件间通信子与父的更多相关文章
- vue组件间通信六种方式（完整版）
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue组件间通信
组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
- Vue组件间通信：一个例子学会Vue组件-Vue.js学习总结）（转载）
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- VUE组件如何通信
Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...
- vue-learning：31 - component - 组件间通信的6种方法
vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
随机推荐
- 划水日记之大哥带我走渗透I
5/24/19 周五 access注入 先测试是否有漏洞 or nor and 1=1 and 1=2 2. Order by 猜字表端,发现一共有22个 3..然后使用 union select 1 ...
- Apache 用户认证
基本认证(Basic) 摘要认证(Digest) 更安全 创建一个名为 users 的认证口令: htpasswd -c /usr/local/apache2/conf/users sam ...
- 关于Mysql select语句中拼接字符串的记录
在mysql的SELECT语句中拼接两列(或多列)的字符串显示: mysql> select concat(dname,loc) from dept; 以上语句便把dept表的dname,loc ...
- [转]0day零距离
前言: 想起这个话题,还要从早年网上的一则新闻说起--"美国联邦官员于2001年12月11日宣布,已破获一起以因特网为犯罪手段的特大软件盗版案--盗版软件的总价值至少高达10亿美元.据悉,该 ...
- python字典总结
今天总结一篇关于字典的知识点> 字典也是python提供的一种常用的数据结构,它用于存放具有映射关系的数据 比如成绩表,语文:34,数学:99,如果单纯的使用两个列表保存这组数据,则无法记录两组 ...
- gperftools尝试
最近在找windows下比较好用的函数时间统计的库,听同事说gperftools是跨平台的,就下载下来尝试了一把.发现它确实实现了windows上可以调用的dll库文件(tcmalloc_minima ...
- SpringBoot之初体验
一.SpringBoot 介绍 1.1 SpringBoot 使命 在之前我们学习 Spring 时,我们了解到 Spring 最根本的使命就是 简化Java开发.而 SpringBoot 的出现也有 ...
- mysql DEFAULT约束 语法
mysql DEFAULT约束 语法 作用:用于向列中插入默认值. 说明:如果没有规定其他的值,那么会将默认值添加到所有的新记录.直线电机 mysql DEFAULT约束 示例 //在 "P ...
- asp.net (web)选择文件夹 上传文件
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- Linux用户和用户组指令
1.创建用户 >useradd username 创建用户 >passwd username 给用户设置密码 ======================================= ...