vue3传参遇到的一个小问题

62 阅读1分钟

父组件中传递了customStyle参数

<Panel title="标题" :custom-style="{background: 'red'}" v-model:show="showBasic">
    <div style="padding-bottom: 20px">内容</div>
</Panel>

panel组件

 <Popup
    :show="show"
    :round="round"
    :radius="radius"
    :teleport="teleport"
    :z-index="zIndex"
    :close-on-click-overlay="closeOnClickOverlay"
    :overlay="overlay"
    :overlay-class="overlayClass"
    :overlay-style="overlayStyle"
    :safe-area-inset-bottom="safeAreaInsetBottom"
    position="bottom"
    @click-overlay="clickOverlay"
    @update:show="updateShow"
  >
  /*其它代码*/
  </Popup>

可以看到并没有将customStyle属性传递给popup组件,但是在页面效果中:custom-style="{background: 'red'}"popup组件中生效了。 经过查验文档添加inheritAttrs: false即可解决,如下:

export default defineComponent({
  name,
  components: { Popup},
  inheritAttrs: false,
  props: {
  },
  setup(props, { emit, slots }) {
  },
})

具体可查vue官方文档