Vue 父子组件通信


父传子:

父组件中(Nav是子组件):

<Nav :topic="'字符串'"></Nav>

子组件Nav.vue中:

export default {
  props:["topic"],
  data() {
    return {
      
    };
  },
  mounted() {
    console.log('current topic is:'+this.topic)
  }
};

props中填入topic,其值来自于父组件中。
父传子就这么简单,当然中间还有一些坑,比如命名方面的问题导致传递失败,大小写的问题等等。详情请参考:https://www.cnblogs.com/cat-eol/p/12157097.html

子传父:

子组件通过:

this.$emit('method', 'value')

其中method为自定义函数,value为参数,当然也可传递多个参数,获取的时候对应更改即可。

父组件中:

<Nav :topic="'字符串'" @parentEventMethod=parentEvent></Nav>

methods:{
    parentEvent: function(param1,param2) {
      console.log('this is parent,param1 is:'+param1)
      console.log('this is parent,param2 is:'+param2)
    }
  }

子组件中:

this.$emit('parentEventMethod', true, false)

自定义方法parentEventMethod与父组件中相同,然后父组件实现一个parentEvent方法,名字随意,只要能对应起来就行,然后获取参数即可。
网上找了个图,以便更清晰的观察:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值