vue2.0-组件传值
父组件给子组件传值，子组件用props接收
例子：两个组件，一个是父组件标签名是parent，一个是子组件标签名是child，并且child组件嵌套在父组件parent里，大概的需求是：我们子组件里需要显示父组件里的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件接收父组件的的数据</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<child :receive-name="msg1"></child>
</div>`,
data(){
return {
msg:'我是父组件的第一条数据',
msg1:'我是父组件的第二条数据'
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<p>子组件接收父组件的的数据：{{receiveName}}</p>
</div>`,
data(){
return {
msg1:'我是子组件的数据'
}
},
props:['receiveName']
}
}
}
}
});
</script>
</body>
</html>
子组件child用props接收父组件parent里的数据，props：[]里的参数是用来接收父组件数据的名字，为了方便用了receiveName，然后我们需要在父组件里的子组件标签child上动态绑定receiveName，由于vue推荐有大小写的英文用-，（receiveName->receive-name）,v-bind：属性名可以成简写：属性名,:receive-name="父组件的数据",父组件的数据有msg,msg1。子组件需要哪个就用那个,这样看起来是不是很方便。
子组件通过事件向父组件发送自己的数据，监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
this.$emit(event,...args);
/*
* event: 要触发的事件
* args: 将要传给父组件的参数
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件向父组件传值</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<p>父组件接收到子组件的数据是：{{parentMsg1}}</p>
<child v-on:listenChildEvent="showChildMsg"></child>
</div>`,
data(){
return {
parentMsg:'我是父组件的第一条数据',
parentMsg1:'' }
},
methods:{
showChildMsg(data){
// console.log(data);
this.parentMsg1=data;
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<button v-on:click="sendMsgToParent">发送子组件数据给父组件</button>
</div>`,
data(){
return {
childMsg:'我是子组件的数据'
}
},
methods:{
sendMsgToParent(){
let childData=this.childMsg;
this.$emit('listenChildEvent',childData)
}
}
}
}
}
}
});
</script>
</body>
</html>
最后我们来简单总结下本例子：
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件（listenToChildEvent），并传递一个参数（childData），childData就是子组件的数据。
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 ：showChildMsg ,该方法带一个参数即是子组件的额外参数,在子组件里数据已经赋值给这个额外参数,所以最后获取到的参数就是子组件的值
4.保存修改的文件，在浏览器中点击按钮，父组件获取到子组件的数据
细结：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
非父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>非父子组件通信</title>
<script src="https://cdn.bootcss.com/vue/2.5.5/vue.js"></script>
</head>
<body>
<div id="example">
<counter></counter>
<counte></counte>
</div>
</body>
<script>
var vm=new Vue();
//创建兄弟组件A
var A={
template:`
<div>
<span>{{a}}</span>
<button @click="send">点击发送数据给B组件</button>
</div>
`,
data(){
return {
a:'我是A组件的数据'
}
},
methods:{
send(){
vm.$emit('msga',this.a)
}
}
};
//创建兄弟组件B
var B={
template:`
<div>
<span>我是B组件->{{a}}</span>
</div>
`,
data(){
return {
a:''
}
},
mounted(){
vm.$on('msga',function(a){
this.a=a;
}.bind(this));
}
}; //注册A B组件
new Vue({
el:'#example',
components:{
'counter':A,
'counte':B
}
});
</script>
</html>
以上就是组件之间的传值了，如果小伙伴们有任何疑问，欢迎留言！小编会及时回复。谢谢对博客园的支持！
vue官网链接：https://cn.vuejs.org/
vuex官网链接：https://vuex.vuejs.org/zh-cn/
axios网站链接：https://www.npmjs.com/package/axios
vue2.0-组件传值的更多相关文章
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue2.0 组件化及组件传值
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- vue2.0组件之间的传值
1.父子组件--props props:需要注意的是,虽然的是单向的数据流,但是如果传递的是数组或是对象这样的引用类型,子组件数据变化,父组件的数据通也会变化 子组件代码 <template&g ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- Vue2.0组件之间通信（转载）
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转：Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
随机推荐
- oracle数据字典-权限-角色-参数
每个数据库都提供了各自的数据字典的方案,虽然形式不同,但是目的和作用是一样的,比如在mysql里数据字典是在information_schema 里表现的,sqlserver则是在sys这个系统sch ...
- 性能测试之mysql监控、优化
我们在做性能测试的目的是什么,就是要测出一个系统的瓶颈在哪里,到底是哪里影响了我们系统的性能,找到问题,然后解决它.当然一个系统由很多东西一起组合到一起,应用程序.数据库.服务器.中中间件等等很多东西 ...
- https ssl 请求过程详解
http 协议:http 协议是一种无状态,短链接的 通信协议,http 协议建立在 tcp 协议之上. http 协议 分成 三个 部分 请求行,请求头,请求体 请求行: 就是访问的地址 ( 包含 ...
- Spring Boot基础知识
Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一名 Spring Boot 的专家. 问题一 Spring Boot.Spring MVC 和 Spring 有什么区别 ...
- WyBox 7620a 启用第二个串口
要修改的文件有两个 mt7620a.dtsi MT7620a.dts 1.进入target/linux/ramips/dts/ mt7620a.dtsi 把”disabled”改为”ok”,添加两行 ...
- [转] nginx配置优化+负载均衡+动静分离(附带参数解析)
#指定nginx进程运行用户以及用户组user www www;#nginx要开启的进程数为8worker_processes 8;#全局错误日志文件#debug输出日志最为详细,而crit输出日志 ...
- jQuery同一标签多个相同事件 return语句 表单提交实例
如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...
- xe5 android sample 中的 SimpleList 是怎样绑定的 [转]
C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile 例子中的绑定方式如下图: 1.拖拽一个listview到界面上,然 ...
- Excel操作小结
插入下拉选择(例如类型):选中单元格==>数据有效性==>数据有效性==>设置/有效性条件==>系列(下拉框内容用英文逗号分开): 插入下拉框设置不同背景色:选择需要设置的单元 ...
- Base64 转 图片
static void Main(string[] args) { string s = "iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAC ...