uniapp 组件传参

我会带着你远行 2021-07-24 13:11 671阅读 0赞

父组件

<v-sub @returnDate=returnDate :backGround=backGround></v-sub>
    
    import vSub from "../../../components/v-sub.vue"
        export default {
            components:{
                vSub
            },
            data() {
                return {
                    backGround:"#000"
                }
            },
            methods: {
                returnDate(e){
                    console.log("接收到的值==>>" e)
                }
            }
        }

<device ref="device" :stoId="storeId" v-show="active == 'device'">
            </device>
            <battery ref="battery" :stoId="storeId" v-show="active == 'battery'">
            </battery>
            
    import device from './components/device.vue'
        import battery from './components/battery.vue'
        export default {
            components: {
                device,
                battery
            },
            data() {
                return {
                    storeId: null, // 参数storeId
                    active: 'device' // 切换tab
                }
            },

子组件

<template>
        <view class="content" :style="[{background:backGround}]">
            <button @tap="passValue">点击传值</button>
        </view>
    </template>
     
    <script>
        export default {
            props:{
                backGround:{
                    type:String,
                    default:"#fff"
                }
            },
            methods:{
                passValue(){
                    this.$emit("returnDate","yoyoyo")
                }
            }
        }
    </script>
     
    <style>
        .content{
            width: 400upx;
            height: 400upx;
        }
    </style>

子类接收父类的数据,就会用到props

![file][]

![file][file 1]

![file][file 2]

子组件给父组件传值首先在子类组件定义事件

![file][file 3]

![file][file 4]

![file][file 5]

![file][file 6]

父组件：![file][file 7]

子组件![file][file 8]

![file][file 9]

子组件

![file][file 10]

父组件

![file][file 11]

![file][file 12]

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

![博客][20191105173853344.jpeg]

[file]: /images/20210724/43193dd89381413aabb5b9d3c56ce725.png
[file 1]: /images/20210724/5d85aa43e474430d8eeb85415c62ee68.png
[file 2]: /images/20210724/0b7093956b0b4fac9f45c1f6db596261.png
[file 3]: /images/20210724/515f954f003c444f8aa5010de4eb4bc5.png
[file 4]: /images/20210724/2f138f59058842f8bc6bacc63fe5f9df.png
[file 5]: /images/20210724/32edb20316fd481b80b0b8dc67869cb4.png
[file 6]: /images/20210724/953242efdca54ade944accb0700f4c07.png
[file 7]: /images/20210724/1e68175247324b26a8f6701d566fb5d1.png
[file 8]: /images/20210724/dde6be35f1e24f70b2b7693c04929cf9.png
[file 9]: /images/20210724/905a52f4c09445a58e3681a621475a00.png
[file 10]: /images/20210724/bba54c56bfc84f0c915fbd794abfb690.png
[file 11]: /images/20210724/0d6b6bf34a7f4f11b7d1d5d2c0b3dfb4.png
[file 12]: /images/20210724/ee6db18b2f1c4c6eb9ddd4632aee77db.png
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[20191105173853344.jpeg]: /images/20210724/1da236701fe44694915038bc21f36b06.png