vue2.0组件通讯

组件通讯

组件通讯方式类别

1. VueJs提供的props和自定义事件
2. eventbus
3. vuex

通讯方式	区别
props	用于父组件传递数据给子组件
自定义事件	用于子组件向父组件通讯
eventBus	适用于非父子组件通讯的简单场景，使用一个空的vue实例做为中央事件总线
Vuex	状态管理，适用于复杂场景

props

父组件传递数据给子组件：
1.子组件显示地用props选项申明得到的数据：

export default {
  name: 'vheader',
  props:['myMessage','myData'],
}

2.父组件传递数据

<v-header  my-message="vue2.0"  my-data="propsdownData"></v-header>

至此，子组件将获取到数据vue2.0和porpsdownData

自定义事件

每一个vue实例都实现了事件接口：

• $on(eventName)监听事件（不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定）
• $emit(eventName)触发事件
  例如：

//App.vue 父组件
<template>
    <div id=”counter-event-example”>
        <p>{{ total }}</p>
        <button-counter v-on:increment=”incrementTotal”></button>
    </div>
</template>

import buttonCounter from ‘./buttonCounter.vue’
exoprt default{
   name:’app’,
   data(){
    return{
        Counter:0
    }
   },
   componts:{
    buttonCounter:buttonCounter
    },
    methods(){
        incrementTotal(){
            This.total += 1
        }
    }
}

//buttonCounter.vue 子组件
<template>
    <div>
        <button @click=”incrementCounter”>点击触发父组件事件</button>
    </div>
</template>
exoprt default{
    name:’buttonCounter’,
    methods(){
    incrementCounter(){
        this.$emit(‘increment’)
      }
    }
}

注意点
1.每次父组件更新，子组件全部prop会更新为最新值。所以，不能在子组件内部改变prop，若是作了，vue会在控制台给出警告。
2.注意在 JavaScript 中对象和数组是引用类型，指向地址，若是 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

eventbus

1.建立中央事件总线eventbus.js:

import Vue from 'vue'
export default new Vue()

2.建立v-component-a.vue子组件

<template>
  <div class="box">
      <h3>子组件A(event bus)</h3>
      <el-button style="margin-top:10px" type="primary" @click="touchCompontB">点击我触发子组件B的事件</el-button>
  </div>
</template>

<script>
import eventbus from '../eventbus.js'

export default {
  name: 'box',
  data () {
    return {
      name: ''
    }
  },
  methods:{
    touchCompontB(){
      eventbus.$emit('getName',['子组件b'])
    }
  },
}
</script>

3.建立v-component-b.vue子组件

<template>
  <div class="box">
      <h3>子组件B {{name}}</h3>
      <el-button style="margin-top:10px" type="primary" @click="getMyMsg('本身')">点击我触发本身组件的事件</el-button>
  </div>
</template>

<script>
import eventbus from '../eventbus.js'

export default {
  name: 'box',
  data () {
    return {
      name: ''
    }
  },
  methods:{
    getMyMsg(arg){
      let msg="触发了"+arg+"组件的方法"
      alert(msg)
    }
  },
  created(){
   eventbus.$on('getName',(arg)=>{    
    this.getMyMsg(arg)
   })
 }
}
</script>

4.在父组件注册两个子组件

<template>
  <div id="app">
    <div class="parentCpt">       
      <div class="clear" style="width:100%">
        <div style="float:left;" class="cptWrap">
          <v-component-a></v-component-a>
        </div>
        <div style="float:right" class="cptWrap">
          <v-component-b></v-component-b>           
        </div>
      </div>         
    </div>
  </div>
</template>

<script>
import vComponentA from './components/v-component-a.vue'
import vComponentB from './components/v-component-b.vue' 
export default {
  name: 'app',
  components:{
    vComponentA:vComponentA,
    vComponentB:vComponentB
  }
}
</script>

注意点：

eventbus.$on('getName',(arg)=>{    
    this.getMyMsg(arg)
 })

若写成es6的箭头函数，则直接写this，不然须要先在eventbus.$on以前将this赋值给let self=this;

Vuex