在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 o n , 因 为 emit和 onvue o n 必 须 基 于 同 一 个 v u e 实 例 , 所 以 父 组 件 作 用 域 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>
Logo

前往低代码交流专区

更多推荐