vue是单向数据流

在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事件，然后执行后面你的函数
        },  
    })