vue-compositionAPI中使用provide，inject数据传递与接收

setup() 中 provide 和 inject 的使用

provide:

// 从Vue对象中解构赋值，获得 provide
const { provide } = Vue

// 使用 provide
provide('字段名', 字段值)

inject:

// 从Vue对象中解构赋值，获得 inject
const { inject } = Vue

// 使用 inject
const 接收字段名 = inject('字段名')

// 可以设置默认值，没有接收到数据时使用默认值，接收到数据就使用接收到的数据
const 接收字段名 = inject('字段名', '默认值')

父子组件之间传递值时单向数据流设置

在父组件中传递的数据，provide时，

父组件中相应处理：
① 设置传递的值为 readonly，
② 定义一个用来改变字段值的方法，也将其 provide 出去
子组件中相应处理：
① inject 接收父组件中传递过来的属性和方法
② 当改变属性值时，调用父组件中传过来的改值方法，在父组件中进行数据修改操作

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>provide-inject-ref数据传递与接收</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { ref, provide, readonly } = Vue
      const name = ref('波吉')
      provide('name', readonly(name))
      provide('changeName', (value) => {
        name.value = value
      })
      return {}
    },
    template: `<child />`
  })
  app.component('child', {
    setup() {
      const { inject } = Vue
      const name = inject('name')
      const changeName = inject('changeName')
      const handleClick = () => {
        changeName('卡克')
      }
      return { name, handleClick }
    },
    template: `
    <div @click="handleClick">{{name}}</div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

原文链接：https://blog.csdn.net/qq_39111074/article/details/121848689