使用组合 API 共享道具

Posted 2023-02-16

【中文标题】使用组合 API 共享道具

【英文标题】：Sharing props with composition API

【发布时间】：2021-03-30 18:15:37

【问题描述】：

有没有办法使用组合 API 在组件之间共享 props，或者我仍然应该为此求助于 mixins？

例如，我有一个“可见”道具，我想在 5 个组件上重复使用它。如何在 1 个通用位置定义它并使用组合 API 重用它？

如果使用 mixin，我会以老式的方式完成：

const mixin = 
   props:  visibile:  type: Boolean: required: false  

在组件中使用：

mixins: [theMixinAbove]

如何使用组合 API 完成此操作？

【问题讨论】：

我不太明白你所说的“分享”道具是什么意思。每个组件都有自己的 props。

在 Vue 3 中，mixins 的 API 似乎没有改变，据我所知，没有其他方法可以实现这一点。

@Daniel_Knights 好的，但是如果我使用组合 API 的 mixins，我无法获得类型安全，对吧？

我实际上无法像您描述的那样让 mixin 与道具一起使用。你测试过它并且知道它有效吗？

@Daniel_Knights 嗯，也许我误会了你，但是是的，我已经用 options API 做过很多次了，这只是重用 mixin 的问题。现在我正在考虑改用PropType<MyProps>，猜猜这是一个可行的选择......

【参考方案1】：

你可以这样做，但我认为你也需要以类似的方式实现 props，并且你不能在设置期间这样做，因为此时，props 已经是预期的。

例如，您可以定义一个与您将在设置期间使用的其他功能一起使用的功能，然后将其分解为您的其余道具

props:myInternalProp:String, ...withVisibilityProps(),

const app = Vue.createApp()

app.component('my-component', 
  template: '<h1>My Component is visiblity</h1>',
  props:...withVisibilityProps(),
  setup(props)
    return(...withVisibility(props))
  
)

function withVisibility(props) 
  return visiblity:Vue.ref(props.visible?"visible":"not visible");

function withVisibilityProps() 
    return visible:Boolean;


app.mount('#app')

<script src="https://unpkg.com/vue@3.0.4/dist/vue.global.prod.js"></script>
<div id="app">
  <my-component :visible="true"></my-component>
  <my-component :visible="false"></my-component>
</div>

请注意，setup 函数用于处理visibility 变量。如果只需要prop，可以跳过withVisibility和setup