uni-app中slot里面渲染的控件无法使用本页面数据,只能使用传递过来的解构数据,怎么解决?

uni-app中slot里面渲染的控件无法使用本页面数据,只能使用传递过来的解构数据,怎么解决?

2 回复

先传过来

更多关于uni-app中slot里面渲染的控件无法使用本页面数据,只能使用传递过来的解构数据,怎么解决?的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中,slot内无法直接访问父组件的数据,这是Vue.js的设计机制。可以通过以下方式解决:

  1. 作用域插槽(推荐) 在子组件中通过v-bind传递数据:

    <!-- 子组件 -->
    <slot :user="userData" :config="configData"></slot>
    

    在父组件中使用:

    <!-- 父组件 -->
    <child-component>
      <template v-slot="slotProps">
        <view>{{ slotProps.user.name }}</view>
        <view>{{ slotProps.config.theme }}</view>
      </template>
    </child-component>
    
  2. 使用provide/inject 在父组件中提供数据:

    export default {
      provide() {
        return {
          pageData: this.pageData
        }
      }
    }
    

    在子组件slot内容中注入:

    export default {
      inject: ['pageData']
    }
回到顶部