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中废弃了 ...
随机推荐
- Linux 下编写.sh文件运行JAR下的Class
#!/bin/sh #bash文件头 APP_HOME=/opt/CrxToMongodb #目录是/opt/CrxToMongodb CLASSPATH=$APP_HOME #bin目录当然是包含j ...
- 95-基于FMC接口的2路CameraLink Base输出子卡模块
基于FMC接口的2路CameraLink Base输出子卡模块 1.板卡概述 FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中都使用.该Ca ...
- [转载]NOR和NAND 存储器的联系与区别
转载了,对于我理解两种Flash起到了帮助,希望博主继续再接再厉,更新博文 原文地址:存储器的联系与区别">NOR和NAND 存储器的联系与区别作者:暴走的工程师 一.类型理解 ...
- Ubuntu18 给terminal改个漂亮的命令行提示符
重新安装了VMware和Ubuntu,但是命令行提示符太单调,不美观,如何更改呢.于是在网上巴拉巴拉搜寻一番. 1.更改PS1环境变量,这俩都可以,我选择第一个: export PS1="\ ...
- 四、ARM 异常处理
4.1 模式与异常 当正常程序流程被暂时停止发生异常,例如响应一个来自外设的中断.在处理异常前,必须保护当前的处理器状态,以便在完成处理程序后能恢复到原来的程序 . 异常的类型: Reset unde ...
- zookeeper之一 安装和配置(单机+集群)
这里我以zookeeper3.4.10.tar.gz来演示安装,安装到/usr/local/soft目录下. 一.单机版配置 1.安装和配置 #.下载 wget http://apache.fayea ...
- wepy相关
1.根据官方文档: $ npm install @wepy/cli -g # 全局安装 WePY CLI 工具 $ wepy init standard myproj # 使用 standard 模板 ...
- SweetAler弹框插件与分页器插件
目录 SweetAlert插件 自定义分页器 使用Django向数据库批量插入数据 自定义分页器的思路 自定义分页器组件 SweetAlert插件 sweetalert是一款基于Bootstrap的专 ...
- echart--如何自定义提示框的内容和样式实例
图例的大概样子 具体设置代码为:
- PHP开发工具PHP基础教程
PHP开发 工具PHP基础教程,以下是兄弟连PHP培训小编整理: PHP IDE PHP IDE也不少,主要从几个方面进行筛选: 跨平台(能够同时在windows,mac或者ubuntu上面运 ...