Vue:vue组件通信

父子组件使用自定义事件

<div id="app">
  <p>总数：{{total}}</p>
  <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>

<script>
  Vue.component('my-component',{
	template:'<div>
  				<button @click="handleIncrease">+1</button>
  				<button @click="handleReduce">-1</button>
  			</div>',
  data:function(){
		retrun {
        	counter:0
        }
	},
   methods:{
   	handleIncrease:function(){
    	this.counter++;
      this.$emit('increase',this.counter);
    },
      handleReduce:function(){
      	this.counter--;
        this.$emit('reduce',this.counter);
      }
   }
});

var app = new Vue({
	el:'#app',
  data:{
  	total:0
  },
  methods:{
  	handleGetTotal:function(total){
    	this.total = total;
    }
  }
})
  </script>

还可以用.native修饰符表示监听的是一个原生事件，监听的是该组件的根元素

<my-component v-on:click.native="handleClick"></my-component>

使用V-model

<div id="app">
  <p>总数:{{ total }}</p>
  <my-component v-model="total"></my-component>
</div>

<script>
  Vue.component("my-component",{
	template:'<button @click="handleClick">+1</button>',
  data:function(){
  	return {
    	counter:0	
    }
  },
  methods:{
  	handleClick:function(){
    	this.counter++;
        this.$emit('input',this.counter);
    }
  };
  
  var app = new vue({
	el:'#app',
  	data:{
		total:0
	}
  })
});
  
  </script>

兄弟组件通信

<div id="app">
  {{ message }}
  <component-a></component-a>
</div>

<script>
  var bus = new Vue();

Vue.component('component-a',{
	template:'<button @click="handleEvent"> 传递事件</button>',
  	method:{
    	handleEvent:function(){
        	bus.$emit('on-message','来自组件component-a的内容');
        }
    }
});

var app = new Vue({
	el:'#app',
  data:{
  	message:''
  },
  mounted:function(){
  	var _this = this;
    
    bus.$on('on-message',function(msg){
    	_this.message = msg;
    });
  }
})
  </script>

跨级组件通信

在子组件中，可以使用this.$parent直接访问该组件的父实例或组件，父组件页可以通过this.$children访问他所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件。

<div id="app">
  {{message}}
  <component-a></component-a>
</div>

<script>
  Vue.component('component-a',{
	template:'<button @click="handleEvent">通过父链直接修改数据</button>',
  methods:{
  	handEvent:function(){
    	this.$parent.message = '来自组件component-a的内容';
    }
  }
})

var app = new Vue({
	el:'#app',
  data:{
  	message:''
  }
})
</script>

子元素索引

当子元素较多时，通过this.$children来一一遍历出我们需要的一个组件实例是比较困难的，尤其是组件动态渲染时，他们的序列是不固定的。Vue提供了子组件索引的方法，用特殊的属性ref来为子组件制定一个索引名称，实例代码如下：

<div id="app">
  <button @click="handleRef">通过ref获取子元素实例</button>
  <component-a ref="comA"></component-a>
</div>

<script>
Vue.component('component-a',{
	template:'<div>子组件</div>',
    data:function(){
    	return {
        	message:'子组件内容'
        }
    }
});

var app = new Vue({
el:'#app',
  methods:{
  	handleRef:function(){
    	var msg = this.$refs.comA.message;
      console.log(msg);
    }
  }
})
</script>

在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内荣国this.$refs来访问指定名称的子组件。