vue 组件中数据传递
//有种形式的传递:从父到子,从子到父,平行级别的传递
//首先第一种:从父到子,用props属性绑定
//父级数据:
new vue({
"el":"#app",
data:{
nickname:"小七"
}
})
//子组件:
vue.component("myComp",{
"props":{"username"}, //或者用["username"]
template:"<h1>欢迎{{username}}</h1>"
})
//页面上:
//1,<my-comp v-bind:username="nickname"></my-comp>
//2,<my-comp :username="nickname"></my-comp>
//把父级数据传给页面上的 nickname,再在子组件中的username去取传过来的值
//props:可以是对象{}也可以是数组[],如下:
props:{
"username":{
type:string,//数据类型
default:function(){//表示不传值时的默认值为“游客”
return "游客";
}
}
}
//数据类型有:string\number\boolean\function\array\object
//
//第二种:从子到父 ,用自定义事件方法
//
//在vue1.0中 vue:$emit("事件名称") //不会冒泡
// $dispatch("事件名称") //会冒泡
//在vue2.0中 用$emit("事件名称") 触发事件,没有$dispatch方法了
// 用$on("事件名称") 监听事件
//组件中定义函数名触发事件时,不允许用驼峰法
//
//自定义事件命名问题:
//1,自定义事件的名称不允许用驼峰法(尽量用动词)
//2,自定义事件对应的函数名也不能用托峰法
//子级数据:
methods:{
add:function(){
this.$emit("myevent",this.count);
},
template:"<div @myevent='parentelent'></div>{{count}}"
}
//父级组件:
methods:{
"parentelent":function(msg){...} //msg就是拿到的count数据
}
//第三种,平行组件传递数据:用空实例搭建桥梁,如下
vue.component("mycomp1",{
"template":"<div>组件一<button v-on:click:'sendDate'></button></div>",//绑定点击事件
data:function(){
return {
user:{id:1,name:"xzz"}
}
},
"methods":{
"sendDate":function(){//定义点击事件
this.$emit('send',this.user);
}
}
});
vue.component("mycomp2",{
"template":"<div>{{template22}}组件二</div>",
created:function(){//生命周期
this.$on("send",function(datas){//datas就是传入的user的数据
this.tempDate=datas;
})
},
data:function(){
return {"tempDate":"数据"}//用于保存数据
}
});
var bus=new Vue();//建一两个组件的通信桥梁,是信息传递对象
vue 组件中数据传递的更多相关文章
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- VUE组件2数据传递
传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- vue 2.x之组件的数据传递(一)
这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
随机推荐
- POJ1273:Drainage Ditches——题解
http://poj.org/problem?id=1273 题目大意: n点m边网络流,求1-n最大流. —————————————— 网络流板子,切了. #include <cstdio&g ...
- BZOJ1833:[ZJOI2010]数字计数——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1833 https://www.luogu.org/problemnew/show/P2602 给定两 ...
- 51NOD 1149:Pi的递推式——题解
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1149 F(x) = 1 (0 <= x < 4) F(x) ...
- bzoj1257: [CQOI2007]余数之和sum(数论)
非常经典的题目... 要求 则有 实际上 最多只有2*sqrt(k)种取值,非常好证明 因为>=sqrt(k)的数除k下取整得到的数一定<=sqrt(k),而k除以<=sqrt(k) ...
- switch语法的盲点
switch语法在项目使用的频率很低,今天看到一个相关的例子引发一些思考,,同时自己也写了一些简单的例子如下: 实例1: int dayOfWeek = 5; switch (dayOfWeek){ ...
- 分别利用并查集,DFS和BFS方法求联通块的数量
联通块是指给定n个点,输入a,b(1<=a,b<=n),然后将a,b连接,凡是连接在一起的所有数就是一个联通块: 题意:第一行输入n,m,分别表示有n个数,有输入m对连接点,以下将要输入m ...
- BigBlueButton简介
BigBlueButton是一套开源的视频会议系统,特别适用于远程教育但也可以用于标准的会议.该系统 可以让多个用户登录共享他们的摄像头并同时能够通过VOIP进行交流.可以在线演示PDF和Office ...
- [技巧篇]02.关于MyBatis存取图片到MySQL数据Blob字段
- Log4J使用实例---日志进行邮件发送或是存入数据库
部分转摘:http://blog.csdn.net/azhao_dn/article/details/9118667 1.根类别(在类别层次结构的顶部,即全局性的日志级别) 配置根Logger,其语法 ...
- centos中mysql的安装
一:前沿 过完年了,花了不少钱啊!本来还打算买电脑的了,结果这个事情还是的延期啊!苍天啊!刚刚也看了下,一台苹果也大概是1w左右!买吧!boy!别犹豫了吧!好吧现在来说说我自己的工作吧!现在过完年到公 ...