使用合成 API 共享道具

Question

有什么方法可以使用组合 API 在组件之间共享 props，还是应该为此使用 mixins？

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

使用 mixin 我会用老式的方式完成它：

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

在组件中使用：

mixins: [theMixinAbove]

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

Answer 1

您可以做到这一点，但我认为您也需要以类似的方式实现道具，并且您不能在设置期间执行此操作，因为此时道具已经是预期的了。

例如，您可以定义一个与您在设置过程中使用的其他函数一起使用的函数，然后将其解构为其余的 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