vue中，父子组件，兄弟间传值

在vue中，经常会遇到组件间数据传递的问题，这里来了解下父子组件，及兄弟组件之间的数据传递

父组件传值给子组件

父组件通过v-bind:参数名=’数据变量’
子组件通过props接收

父组件通过v-bind:参数名=’数据变量’

<template>
  <div id="app">
    <!--静态头部-->
    <v-header v-bind:seller='seller'></v-header>
    <!--tab栏-->
    <div class="tab">
        <div class="tab-item">
              <router-link to="/goods">商品</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/ratings">评论</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/seller">商家</router-link>
        </div>
    </div>
    <!--动态页面-->
    <router-view :seller="seller" keep-alive class="view one"></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
    import header from './components/header/header.vue'
    const DATA_OK = true;
    export default {
      name: 'App',
      data(){
        return{
            seller:{}
        }
      },
      created(){
        this.$http.get('/api/seller').then((response)=>{
            if(response.ok == DATA_OK){
                this.seller = response.body.data;
                }
        })
      },
      components:{
        'v-header' : header
      }
    }
</script>

子组件通过props接收

export default {
      props: {
        seller:{
            type: Object
        }
      }
}
/*还可以为props设置默认值，在没有传递过来的时候生效*/
props:{
    food:{
        type: Object,
        default(){
            return {
                count:2
            }
        }
    }
},

子组件传值给父组件

官网上有较详尽的介绍：http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1

1、子组件发射数据，父组件接收

子组件

this.$emit('cartadd', event.target);

父组件

在子组件这个标签中加这个方法
<v-cartcont @cartadd='_drop'></v-cartcont>

注意
在这里不能用this. $on，因为$ emit和 $on必须基于同一个vue实例，所以父组件作用域$ on() 作用在子组件标签上用v-on 代替，还可以创建中央事件总线eventBus.js,（eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。）

import Vue from vue
export default new Vue;

import bus from './eventBus.js'
//便可以使用
bus.$emit
bus.$on

2、子组件直接改变父组件数据

vue2.0中，子组件中不能修改父组件的状态，否则在控制台中会报错。
比如，父组件传给子组件一个变量，子组件只能接收这个值，不能修改这个值，修改会报错。想要修改，只能赋值给另一个data中定义的变量
但是，这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等
如果props是对象的话，在子组件内修改props的话，父组件是不会报错的，父组件的值也会跟着改变
父组件传递给子组件一个对象，子组件将这个对象改了值，那么父组件中的值相应改变
为对象添加属性的时候，应该用这种方式增加，而不是直接点加，Vue.set(this.food,’count’,1)

组件传值给兄弟组件

其实是一个，子组件传值给父组件，父组件监听到数据再传递给另一个子组件的过程

例如：a组件发射一个isLogFn数据

<template>
  <div class="adiv">
    <p>a组件</p>
    <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
  </div>
</template>

<script>

export default {
  methods: {
    handleClick () {
      this.$emit('isLogFn','log')
    }
  }
}
</script>

父组件接收a,b子组件

<template>
  <div id="app">
    <aPage @isLogFn = "logfc"></aPage>
    <bPage :isLog = "login"></bPage>
  </div>
</template>

<script>
import aPage from './components/a.vue'
import bPage from './components/b.vue'
export default {
  data () {
    return {
      login: 'false'
    }
  },
  name: 'app',
  components: {
    aPage,
    bPage
  },
  methods: {
    logfc(data) {
      if (data == 'log') {
        this.login = 'true'
      }
    }
  }
}
</script>

b组件最后接收数据，b组件中需要创建props，定义一个isLog 属性，这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据，最终供b组件使用。示例中，我们在v-show=”isLogin” 中用来控制弹窗是否打开。
b.vue

<template>
  <div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
</template>

<script>
export default {
  props: ['isLog'],
  data () {
    return {

    }
  },
  computed: {
    isLogin () {
      if(this.isLog == 'true'){
        return true
      } else {
        return false
      }
    }
  }
}
</script>