在Vue传值问题有三种情况:
父传子 、 子传父 、非父子之间的传值
父传子
父传递子数据时,需要在子组件上接收一个变量,用props属性,接收变量,props是对象形式,可以接受多个变量,同时可以在指定变量里进行校验
props:{
content:{
type:String//type类型是字符串,如果为数字的时候,就会发生报错
,default:function(){
return XXXX
}//返回的默认值
,require:true//当前这个参数是不是必须赋值,true为必须赋值
validator:function(){
return XXXX>XXX;//校验规则,返回一个布尔值
}
}
}
子传父
当在事件中操作参数想展示到父组件上的时候,根据vue数据单向流,所以不能向上传,需要把参数赋值给另一个变量,使得另一个变量根据需求进行操作。通过$emit检测到事件的触发,把另一个变量当成参数,传到父组件中,并展示到页面内。
<div id="app">
<child @change="handlea" :content="123456"></child>
<child @change="handlea" :content="9876543"></child>
<span v-text="totle"></span>
</div>
Vue.component('child',{
props:['content'],
data:function(){
return{
contentText: this.content
}
},
template:'<span @click="handle">{{contentText}}</span>',
methods:{
handle:function(){
this.content = ++this.contentText;
this.$emit('change',this.contentText);
}
}
})
new Vue ({
el:'#app',
data:{
totle:0
},
methods:{
handlea:function(value){
this.totle = ++value;
}
}
})
效果图:
非父子之间的传值
//vue原型链挂载总线
Vue.prototype.bus = new Vue();
//子组件发送数据
this.bus.$emit(“change”,data);
//子组件接收数据
this.bus.$on(“change”,function(data){
})
var Event = new Vue(); 相当于又new了一个vue实例,Event中含有vue的全部方法;
Event.$emit(‘msg’,this.msg); 发送数据,第一个参数是发送数据的名称,接收时还用这个名字接收,第二个参数是这个数据现在的位置;
Event.$on(‘msg’,function(msg){
接收数据,第一个参数是数据的名字,与发送时的名字对应,第二个参数是一个方法,要对数据的操作
/这里是对数据的操作
})
Vue.prototype.bus = new Vue();//在vue的原型上添加一个bus的属性,所以每一个vue的实例都会有bus这个属性
Vue.component('child',{
props:{content:String},
data:function(){
return{
setContent:this.content
}
},
template:'<span @click="handle">{{setContent}}</span>',
methods:{
handle:function(){
this.bus.$emit('change',this.setContent);
}
},
mounted() {
var _this = this
this.bus.$on('change',function(msg){//后面传来的参数
_this.setContent = msg;
})//this.bus去监听change事件,然后执行后面你的函数
},
})