Vue 组件之间传参/调用

父子组件之间不能直接传参或者调用方法

父 => 子,传值(props)
使用v-bind传值给子组件,子组件使用props来接收
父:父组件

子:
在这里插入图片描述
在这里插入图片描述

子 => 父,传值( e m i t ) 在 子 组 件 方 法 里 使 用 emit) 在子组件方法里使用 emit使emit来触发父组件的口令绑定的方法
注意html不区分大小写,按理说子组件中声明的口令hideCoupon在父组件绑定在html上时可以用hide-coupon的,但是没触发
父:
在这里插入图片描述
在这里插入图片描述
子:
在这里插入图片描述

子 => 父,调用( r e f s ) 父 组 件 需 要 定 义 一 个 方 法 , 然 后 在 里 面 通 过 refs) 父组件需要定义一个方法,然后在里面通过 refsrefs来调用对应子组件的方法
父:
在这里插入图片描述
子:

在这里插入图片描述
父=>子,调用(provide/inject)
使用provide传递当前组件实例

provide() {
    return {
      showServiceInfo: this.showServiceInfo
    }
  },

在后代组件中接收组件

export default {
  inject: ["showServiceInfo"],
  data() {
    return {
      serviceList: [],
      dialogVisible: false,
      multipleSelection: []
    }
  },
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值