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();//建一两个组件的通信桥梁，是信息传递对象