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 ...
随机推荐
- BZOJ5340 & 洛谷4564 & LOJ2552:[CTSC2018]假面——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5340 https://www.luogu.org/problemnew/show/P4564 ht ...
- BZOJ3864 & HDU4899:Hero meet devil——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3864 http://acm.hdu.edu.cn/showproblem.php?pid=4899 ...
- HDU.1233 还是畅通工程(Prim)
HDU.1233 还是畅通工程(Prim) 题意分析 首先给出n,代表村庄的个数 然后出n*(n-1)/2个信息,每个信息包括村庄的起点,终点,距离, 要求求出最小生成树的权值之和. 注意村庄的编号从 ...
- HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解)
HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解) 题意分析 要先排序,在做01背包,否则不满足无后效性,为什么呢? 等我理解了再补上. 代码总览 #in ...
- JavaScript in 操作符
JavaScript的in操作符可以用来判断一个属性是否属于一个对象,也可以用来变量一个对象的属性 1. 判断属性属于对象 var mycar = {make: "Honda", ...
- selenium - webdriver - ActionChains类(鼠标操作)
ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_click() ...
- ACE反应器(Reactor)模式(3)
转载于:http://www.cnblogs.com/TianFang/archive/2006/12/18/595938.html 在服务器端使用Reactor框架 使用Reactor框架的服务器端 ...
- WPF 分辨率无关性原理
WPF在计算窗口尺寸大小时使用的是系统的DPI设置.WPF窗口以及窗口中所有的元素都是使用设备无关单位度量.一个设备无关单位被定义为1/96英寸. [物理单位尺寸]=[设备无关单位尺寸]*[系统DPI ...
- Mabatis(2) 全局配置文件
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...
- 【Android】Android之USB
[转载请注明出处] 首先介绍一个概念:USB Host and Accessory Android通过两种模式支持一系列的USB外围设备和Android USB附件(实现了Android附件协议的硬件 ...