美文网首页
父子组件通信

父子组件通信

作者: Mr丶林 | 来源:发表于2019-03-22 18:06 被阅读0次

父级给子组件传值:

在父级中调用组件

<get_chance id="get_chance"  active_info="{{active_info}}" member_data="{{member_data}}" add_status="{{add_status}}"> </get_chance>

在子组件js中获取

    properties: {
        active_info: { // 属性名
            type: Object, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
            value: '' // 属性初始值(可选),如果未指定则会根据类型选择一个
        },
        add_status: {
            type: Boolean,
            value: ''
        },
        member_data: {
            type: Object,
            value: ''
        }
    },

子组件给父级传值

在子组件中

   PublicFunA.add_chance(args).then(function (res) {
                    // console.log(res.data)
                    //更新玩家数据
                    PublicFunA.lucky_member().then(function (res) {
                        console.log(res.data)

                        if(res.data.wx_chance == 1){
                            that.setData({
                                focus_status: true,
                            })
                        }
                     ** //重点,将请求到的数据传给父级**
                        let myEventDetail = {
                            val: res.data
                        }
                        that.triggerEvent('compontpass', myEventDetail)
                    })

父级 html

<get_chance id="get_chance" bind:compontpass="compontpass"> </get_chance>

父级js

    //父组件接收子组件传来的值,更新玩家数据
    compontpass: function (e) {
        // if(e.detail.val){}
        // console.log(e.detail.val);
        this.setData({
            member_data: e.detail.val
        })

    },

相关文章

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

  • 组件通信

    组件关系 组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。 父子组件通信 1. 子组件使用 $emit(...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • [Vue]组件之间如何通信?

    组件通信可以大致分为两种情况,父子组件之间的通信和非父子组件之间的通信,下面来分别介绍 一、父子组件之间的通信 1...

  • Vue入门系列(五)组件通信

    组件内通信主要分为两种:父子组件通信和子组件之间通信。 1.父子组件通信 父组件通过props属性向子组件传递数据...

  • Vue3组件化(二):非父子组件的通信、插槽Slot

    非父子组件的通信 在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。这里我们...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • 12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

    在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。非父子组件的通信又可以分为...

  • vue2中eventbus遇到的坑

    前言 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数...

  • Vue事件总线(EventBus)使用详细介绍

    前言 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数...

网友评论

      本文标题:父子组件通信

      本文链接:https://www.haomeiwen.com/subject/fqrrvqtx.html