关于 provide/inject 使用的一些疑问

[trry-hub]

vue-project.zip

上边是一个demo

1. 我注入了一个ref对象，在其子组件中用 computed 使用时，提示我只读属性不可修改，我觉得我对单项数据流理解是正确的。
2. 如果我provide时没有使用readonly, 在其子组件中computed 不使用set方法，依然可以更改到provide 处的值，这不就直接修改了元对象了，为什么？
3. 怎样使用 provide/inject 传值，满足传递的值是 ref 对象，为了防止子组件修改值，在provide时加上readonly，我应该怎样写？

[trry-hub]

@yyx990803

[zhuyfian1996]

哥们你这set方法都没进去。。 你这双向绑定是直接改了get方法里获取到的message.value 也就是readonly的那个message。。。

[trry-hub]

这是computed 源码？

[zhuyfian1996]

是的

[zhuyfian1996]

import { inject,computed } from 'vue'

const {message,updateMessage} = inject('message')


const onInput = function (e) {
  updateMessage(e.target.value);
};

</script>

<template>
  <p>
    Message to grand child: {{ message.text }}
    <input :value="message.text" @input="onInput" />
  </p>
</template>```

[trry-hub]

这种我是知道的，单纯不理解computed，我有空去看下源码吧

[trry-hub]

感谢！

[trry-hub]

import { inject,computed } from 'vue'

const {message,updateMessage} = inject('message')


const onInput = function (e) {
  updateMessage(e.target.value);
};

</script>

<template>
  <p>
    Message to grand child: {{ message.text }}
    <input :value="message.text" @input="onInput" />
  </p>
</template>```

刚才看了el-checkbox 的源码 它的 mode 也是通过 computed 实现的，所以， 中model-value ts 会报 是只读属性。这样感觉 provide/inject 并不是很好用

[zhuyfian1996]

哪里报readonly了👀

[zhuyfian1996]

而且readonly和provider/inject有啥关系。。

[zhuyfian1996]

<script setup>
import { inject,computed } from 'vue'

const {message,updateMessage} = inject('message')

const model = computed({
  get() {
    return message.value.text
  },
  set(val) {
    updateMessage(val)
  }
}) 
</script>

<template>
  <p>
    Message to grand child: {{ model }}
    <input v-model="model" />
  </p>
</template>

这样你可能就理解为啥你那报readonly了