//有种形式的传递:从父到子,从子到父,平行级别的传递
//首先第一种:从父到子,用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 组件中数据传递的更多相关文章

  1. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  2. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  3. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  4. vue 组件之间数据传递(七)

    1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...

  5. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

  6. VUE组件2数据传递

    传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...

  7. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  8. vue 2.x之组件的数据传递(一)

    这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...

  9. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

随机推荐

  1. BZOJ5340 & 洛谷4564 & LOJ2552:[CTSC2018]假面——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5340 https://www.luogu.org/problemnew/show/P4564 ht ...

  2. BZOJ3864 & HDU4899:Hero meet devil——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3864 http://acm.hdu.edu.cn/showproblem.php?pid=4899 ...

  3. HDU.1233 还是畅通工程(Prim)

    HDU.1233 还是畅通工程(Prim) 题意分析 首先给出n,代表村庄的个数 然后出n*(n-1)/2个信息,每个信息包括村庄的起点,终点,距离, 要求求出最小生成树的权值之和. 注意村庄的编号从 ...

  4. HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解)

    HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解) 题意分析 要先排序,在做01背包,否则不满足无后效性,为什么呢? 等我理解了再补上. 代码总览 #in ...

  5. JavaScript in 操作符

    JavaScript的in操作符可以用来判断一个属性是否属于一个对象,也可以用来变量一个对象的属性 1. 判断属性属于对象 var mycar = {make: "Honda", ...

  6. selenium - webdriver - ActionChains类(鼠标操作)

    ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_click() ...

  7. ACE反应器(Reactor)模式(3)

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/18/595938.html 在服务器端使用Reactor框架 使用Reactor框架的服务器端 ...

  8. WPF 分辨率无关性原理

    WPF在计算窗口尺寸大小时使用的是系统的DPI设置.WPF窗口以及窗口中所有的元素都是使用设备无关单位度量.一个设备无关单位被定义为1/96英寸. [物理单位尺寸]=[设备无关单位尺寸]*[系统DPI ...

  9. Mabatis(2) 全局配置文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...

  10. 【Android】Android之USB

    [转载请注明出处] 首先介绍一个概念:USB Host and Accessory Android通过两种模式支持一系列的USB外围设备和Android USB附件(实现了Android附件协议的硬件 ...