provide和inject的父子传参使用

1、父组件 

  provide() {
    return {
      data: '传参过去'
    }
  },

2、子组件

inject: ['data'],
console.log(this.data) // 传参过去

注意:

(1)provide 和 inject 绑定并不是可响应的。这是刻意为之的。

(2)执行顺序:data->provide->created->mounted

(3)如果传入的是对象,仍然是响应式!!!!!!!!!!!!!!!!!!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2和Vue3在使用上有以下几个区别: 1. 数据双向绑定原理:Vue2使用的是ES5的数据劫持Object.defineProperty配合发布订阅模式来实现,而Vue3则使用Proxy的API(Reflect)来实现。Vue3的Proxy可以直接监听对象而非属性,也可以直接监听数组的变化,并且提供了多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等,这是Object.defineProperty所不具备的。\[1\] 2. setup()函数特性:Vue3引入了setup()函数,通过该函数可以进行组件的初始化设置。同时,Vue3还提供了provideinject,可以在父组件中通过provide暴露属性或方法,子组件通过inject接受,并且只要是父组件的后代,都可以通过inject接收到父组件暴露的值。此外,Vue3还新增了teleport(瞬移)的特性。\[2\] 3. 生命周期函数:Vue2和Vue3的生命周期函数有所不同。在Vue2中,常见的生命周期函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。而在Vue3中,使用了setup()函数后,生命周期函数的使用方式有所改变,变为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等。\[3\] 4. 父子传参方式:Vue2和Vue3的父子传参方式也有所不同。具体而言,Vue2中使用props进行父子组件之间的传参,而Vue3中则可以使用setup()函数中的参数来进行父子组件之间的传参。\[3\] 总结起来,Vue3相较于Vue2在数据双向绑定、setup()函数特性、生命周期函数和父子传参方式等方面有一些改进和新增的特性。 #### 引用[.reference_title] - *1* *2* *3* [vue2和vue3的区别](https://blog.csdn.net/flhhly/article/details/127862573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值