Vue3如何无需逐个声明将readonly属性传递给所有嵌套组件？

Vue 实现方案 #

• 用 Vue 自带的 provide + inject 就能搞定，顶层组件统一提供readonly状态，所有嵌套组件直接调用，不用每个组件都声明props：

  <!-- 顶层父组件 -->
  <script setup>
  import { provide } from 'vue'
  // 可根据业务逻辑动态设置readonly的值
  const readonly = true
  provide('readonly', readonly)
  </script>
  
  <!-- 任意层级的嵌套组件 -->
  <script setup>
  import { inject } from 'vue'
  // 第二个参数是默认值，防止上层未提供时报错
  const readonly = inject('readonly', false)
  </script>
  

• 要是需要响应式状态，直接传递ref对象即可，嵌套组件拿到后能自动跟随更新：

  <!-- 顶层父组件 -->
  <script setup>
  import { provide, ref } from 'vue'
  const readonly = ref(true)
  // 后续可通过readonly.value修改状态
  provide('readonly', readonly)
  </script>
  
  <!-- 嵌套组件 -->
  <script setup>
  import { inject } from 'vue'
  const readonly = inject('readonly', ref(false))
  // 使用时访问readonly.value即可
  </script>
  

React 实现方案 #

• 用 React 的 Context API 实现全局状态传递，彻底摆脱逐层传props的麻烦：

  // 创建Context文件，比如readonly-context.js
  import { createContext, useContext } from 'react'
  
  // 设置默认值，避免未包裹Provider时出错
  const ReadonlyContext = createContext(false)
  
  // 导出Provider和自定义钩子
  export function ReadonlyProvider({ children, value }) {
    return (
      <ReadonlyContext.Provider value={value}>
        {children}
      </ReadonlyContext.Provider>
    )
  }
  
  export function useReadonly() {
    return useContext(ReadonlyContext)
  }
  

  // 顶层组件中使用Provider
  import { ReadonlyProvider } from './readonly-context'
  
  function App() {
    const readonly = true
    return (
      <ReadonlyProvider value={readonly}>
        {/* 所有嵌套组件都能获取readonly值 */}
        <DeepNestedComponent />
      </ReadonlyProvider>
    )
  }
  

  // 任意嵌套组件中用自定义钩子获取
  import { useReadonly } from './readonly-context'
  
  function DeepNestedComponent() {
    const readonly = useReadonly()
    return <input type="text" readOnly={readonly} />
  }
  

• 需要更新状态的话，把useState的更新函数也放进Context里，嵌套组件调用更新函数就能修改顶层的readonly状态。

通用思路 #

不管用什么前端框架，核心都是把readonly状态提升到公共父组件，再通过框架提供的上下文机制传递给所有嵌套组件，这样就不用在每个组件里重复声明readonly属性，解决了props透传的问题。

内容的提问来源于stack exchange，提问作者Vinicius Andrade