uni-app中组件传值(父传子，子传父)

一、父组件向子组件传值

通过props来实现，子组件通过props来接收父组件传过来的值！

1、逻辑梳理

父组件中：

第一步:引入子组件；

import sonShow from '@/component/son.vue';

第二步:在components中对子组件进行注册；

components: {
    sonShow
},
                

第三步:以标签的形式载入；通过数据绑定的形式进行传值~

<son-show :reciveUserInfo="userInfo"></son-show>

子组件中：

 通过props接收父组件中传过来的值；

props:["reciveUserInfo"],

2、代码展示

父组件index.vue

<template>
    <view class="content">
        <son-show :reciveUserInfo="userInfo"></son-show>
    </view>
</template>
 
<script>
    import sonShow from '../../component/son.vue';
    export default {
        components: {
            sonShow
        },
        data() {
            return {
                userInfo: [{
                        "userName": "kaliwo",
                        "age": "19"
                    },
                    {
                        "userName": "lihuahua",
                        "age": "39"
                    }
                ]
            }
        }
    }
</script>

子组件son.vue

<template>
    <view class="">
        <block  v-for="(item,index) in reciveUserInfo" :key="index">
            <view class="mesg">
                <text>{{item.userName}}</text>
                <text>{{item.age}}</text>
            </view>
        </block>
    </view>
</template>
 
<script>
    export default{
        props:["reciveUserInfo"],
    }
</script>
<style>
    .mesg{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
 
 

3、结果

四、说明

对于一些详情页，比如有时我们需要点赞数量+1，-1的效果；但是，由于子组件不能改变父组件的值，所以直接操作从父组件接收的值进行更改是没有效果的！就像如下：

     let list = that.reciveUserInfo;
        for(var i in list){
        let tempAge = list[i].age + 1;
        list[i].age = tempAge;
        that.reciveUserInfo = list;
    }

年龄还是没有改变。所以应该怎么做了？

把从父组件接收到的值reciveUserInfo赋给一个新的变量mesgShow，对这个新的变量进行操作，然后用对齐进行渲染即可！

let list = that.reciveUserInfo;
    for(var i in list){
       let tempAge = list[i].age + 1;
       list[i].age = tempAge;
       that.mesgShow = list;
}

附加：改变的代码：

二、子组件向父组件传值

父组件index.vue    在父类引用标签上写上在子类$emit里面定义的方法名:send, 以及接收方法

<template>
    <view class="content">
        <son-show @send="getSonValue"></son-show>
    </view>
</template>
 
<script>
    import sonShow from '../../component/son.vue';
    export default {
        components: {
            sonShow
        },
        methods:{
            getSonValue: function(res){
                console.log("res=========",res)
            }
        }
    }
</script>

子组件；

<template>
    <view class="" @click="sendMegToIndex">
        点我向父组件传值
    </view>
</template>
 
<script>
    export default{
        methods:{
            sendMegToIndex: function(){
                // 向父组件传值  第一个参数是方法名：send   第二个参数是传递的值：我是来自子组件的值
                this.$emit("send","我来自子组件")
            }
        }
    }
    
</script>
 
 

三. 兄弟组件传值

定义一个eventBus.js文件，导出一个空的vue对象，在兄弟组件中引入bus.js的文件，在A组件通过bus.e m i t ( ) 传 递 ， 在 B 组 件 中 的 c r e a t e d 函 数 中 ，

使 用 b u s . emit()传递，在B组件中的created函数中，使用bus.emit()传递，在B组件中的created函数中，使用bus.on接受

根组件如下：

<template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>

<script>
  import ChildA from './components/ChildA' // 导入A组件
  import ChildB from './components/ChildB' // 导入B组件

  export default {
    name: 'App',
    components: {ChildA, ChildB} // 注册A、B组件
  }
</script>

兄弟A组件如下:

<template>
  <div id="childA">
    <h1>我是A组件</h1>
    <button @click="transform">点我让B组件接收到数据</button>
    <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        AMessage: 'Hello，B组件，我是A组件'
      }
    },
    computed: {
      BMessage() {
        // 这里存储从store里获取的B组件的数据
        return this.$store.state.BMsg
      }
    },
    methods: {
      transform() {
        // 触发receiveAMsg，将A组件的数据存放到store里去
        this.$store.commit('receiveAMsg', {
          AMsg: this.AMessage
        })
      }
    }
  }
</script>

兄弟B组件如下

<template>
  <div id="childB">
    <h1>我是B组件</h1>
    <button @click="transform">点我让A组件接收到数据</button>
    <p>因为你点了A，所以我的信息发生了变化：{{AMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        BMessage: 'Hello，A组件，我是B组件'
      }
    },
    computed: {
      AMessage() {
        // 这里存储从store里获取的A组件的数据
        return this.$store.state.AMsg
      }
    },
    methods: {
      transform() {
        // 触发receiveBMsg，将B组件的数据存放到store里去
        this.$store.commit('receiveBMsg', {
          BMsg: this.BMessage
        })
      }
    }
  }
</script>

四. 通过vuex来实现组件传值

在src中新建一个store文件夹，在文件夹中新建一个 index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  // 初始化A和B组件的数据，等待获取
  AMsg: '',
  BMsg: ''
}

const mutations = {
  receiveAMsg(state, payload) {
    // 将A组件的数据存放于state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 将B组件的数据存放于state
    state.BMsg = payload.BMsg
  }
}

export default new Vuex.Store({
  state,
  mutations
})