Vue中组件的数据传输

获取组件数据

获取DOM数据

1、引用的方式操作DOM（获取DOM数据）

在HTML标签中使用ref标签来引用数据：

//HTML部分
<p @click="handleClick" ref="click1">{{num1}}</p
//Vue组件部分
handleClick:function(){
   			this.num1++;
   			alert(this.$refs.click1);
   		},

2.向组件中插入HTML代码，并解析

父子组件数据传递

父传子

父组件向子组件传递数据采用属性引用的方式，Vue采用单向数据流的方式，子组件直接改变父传过来的属性时可能会报错。

子传父

通过事件触发监听传递

 //HTML部分
<!-- 子组件通过属性传值
    父组件监听子组件change方法 -->
  	<counter1 :count="0" @change="rootchange"></counter1>
  	<counter1 :count="0" @change="rootchange"></counter1>
  	<div>{{total}}</div>
 //vue部分
var counter = {
  			props:['count'],
  			data: function(){
  				return{
            //通过复制避免直接改变父组件数据
  					number:this.count
  				}
  			},
  			template:'<div @click="handleClick">{{number}}</div>',
  			methods:{
  			handleClick:function(){
  				this.number++;
          //子组件向父组件传递通过事件触发监听传递
          //$emit方法向上传递事件与参数；
  				this.$emit('change',1)
  			}
  		  }
  		};
      //父组件
  		var vm=new Vue({
  			el:'#root',
  			data:{
  				total:0,
  			},
  			components:{
  				counter1:counter
  			},
  			methods:{
          //a为子组件传递上来的参数
  				rootchange:function(a){
                  this.total+=a;
  				}
  			}

  		})

非父子组件数据传递

1. 使用bus总线模式
2. 使用Vuex实现