wx wepy子组件传值父组件

最新推荐文章于 2021-07-12 23:05:42 发布

原创最新推荐文章于 2021-07-12 23:05:42 发布 · 761 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #小程序

web 同时被 3 个专栏收录

31 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

26 篇文章

订阅专栏

本文介绍了一种在Wepy框架中实现子组件向父组件传递数据的方法。通过使用$emit触发事件并携带参数，子组件可以在特定操作时向父组件发送数据，父组件通过监听事件接收并处理这些数据。

子组件传值父组件

子组件:

<template>

<view v-if="isShow" @click="clickSon">点击子组件</view>

</template>

<script>
    import wepy from '@wepy/core'

    wepy.component({
        props:{
            isShow:true
        },
        methods: {
            /**
            * 关闭子组件
            * */
            clickSon() {
                this.isShow = false
                //通过$emit传值给父组件(方法名,参数)
                this.$emit('close',this.isShow)
            }
        }
    })
</script>

父组件:

<template>
    <dow-tips @close="close" :isShow="isShow" />
</template>

<script>
    import wepy from '@wepy/core'
    
    wepy.page({
        data:{
            isShow:false
        },
        methods:{
            close(arr) {
            //arr为子组件传递过来的参数是一个arguments
            this.isShow = arr[0];
            }
        }
    })
</script>

<config>
    {
    <!-- 引入组件 -->
    usingComponents: {
    "van-tab": "../components/vant/tab/index",
    "van-tabs": "../components/vant/tabs/index",
    "van-rate": "../components/vant/rate/index",
    "van-overlay": "../components/vant/overlay/index",
    "van-stepper": "../components/vant/stepper/index",
    "dow-tips": "../components/dowTips"
    }
    }
</config>