组件通信ew

1父传子  
在父组件的子组件的标签上绑定自定义属性 在子组件中通过props["]接收

父传子的使用场景 封装列表的时候 把数据传到子组件渲染

在接收的时候 可以定义为数组 也可以定义为对象,定义为对象的话就能设置 数据类型和默认值

2子传父  
在父组件的子组件的标签上绑定自定义事件 在子组件中通过$emit()调用这个事件

后面跟两个参数 第一个是事件名 第二个参数是传递的值

子传父的使用场景:在子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据

3兄弟组件传值

又称中央事件总线 在main.js中兴建一个vue实例并且挂载到原型上

再通过this.$emit.bus来传递参数数据 通过在子组created this.$emit.on来接收传递的值

  1. 兄弟组件传值 中央事件总线 eventbus 在 main.js 定义一个空的 vue 实例并且挂载在原型上,通过$emit传数据,在要接收的子组件的created钩子函数下通过$on 接收

  2. vuex 把公共数据存在 vuex 里 这样就能实现组件通信

  3. 本地存储 把要传递的数据存在本地存储里 在要接收的组件接收 也能实现组件通信

  4. v-model v-model 是一个语法糖 是:value 和 @input 的合写 所以说能实现组件通信

  5. $attr 和 $listener 主要是祖孙之间传值 父组件下面有子组件a 子组件a下面又有 子组件b 在父组件里还是用自定义属性和自定义事件传 在子组件a下面绑定v-bind="$attrs" v-on="$listeners" 在子组件b下面通过$attrs 拿数据 通过 $emit 调用方法

  6. provide 和 inject 不管嵌套了几层都能拿到数据 把数据定义在 provide 里 在子组件通过 inject 拿到数据 缺点是不响应

  7. children 和 parent 在子组件里通过$parent 拿到父组件的数据和方法 在父组件里通过$children 拿到子组件的数据和方法

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值