vue3 provide与inject的使用小技巧

主要使用来沟通上下文,比如父——子——子1——子2,父组件和子2组件间的通信,不使用这方法也能解决的方式还有两种

  1. props $emit 一层一层的传 弊端:写着太麻烦
  2. vuex 用多了性能就不太行了

进入正题

官方文档上只提供了传递值的方式,没有提供子组件去跨级改父级组件的值,但是可以换一种写法就可以了,直接代码

代码结构: 父组件——child组件——son组件

父组件

<template>
  <div class="text">盒子 {{state.name}}</div>
  <div class="box">
   <Child/>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, provide } from 'vue'
import Child from './components/child.vue'
export default defineComponent({
  components:{
    Child
  },
  setup() {

    const state = reactive<any>({
      name: 'zlz',
      age: 24
    })

    const update = (key: string, val: any): void => {
      state[key] = val
    }

    provide('ref2', {
      val: state,  // val需要传递的值
      update // 更新传递的值的方法
    })
    return {
      state
    }
  }
})
</script>

ps:当然也可以换一种写法 这一种写法要简便一点 但是语义化更弱
const state = reactive<any>({
  name: 'zlz',
  age: 24,
  update // 更新state的方法
})

provide('ref2', state)

child组件

<template>
  <div class="box">
    <div class="box">child组件</div>
    <Son/>
  </div>
</template>

<script>
import { defineComponent, reactive, toRaw } from 'vue'
import Son from './son.vue'

export default defineComponent({
  components:{
    Son
  },
  setup() {

  }
})
</script>

son组件

<template>
  <div class="box">
    son组件 {{ref2.val.age}}
  </div>
  <button @click="handleClick">
    子组件点击
  </button>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const ref2 = inject('ref2')
    const handleClick = () => {
      const key = 'age'
      ref2.update(key, 111) // 调用传递下来的方法去更新父组件的值
    }
    return {
      ref2,
      handleClick
    }
  }
}
</script>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值