javascript - 使用组合 API 共享 Prop

Question

有没有办法使用组合 API 在组件之间共享 Prop ，或者我仍然应该为此求助于 mixins？
例如，我有一个“可见” Prop ，我想在 5 个组件上重复使用它。如何在 1 个公共(public)位置定义它并使用组合 API 重用它？
使用 mixin，我会以老式的方式完成它:

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

在组件中使用:

mixins: [theMixinAbove]

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

Answer 1

你可以这样做，但我认为你也需要以类似的方式实现 Prop ，并且你不能在设置期间这样做，因为此时 Prop 已经是预期的。
例如，您可以定义一个与您在设置期间使用的其他功能一起使用的功能，然后将其分解为其余的 Prop 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