uni-app中slot里面渲染的控件无法使用本页面数据,只能使用传递过来的解构数据,怎么解决?
uni-app中slot里面渲染的控件无法使用本页面数据,只能使用传递过来的解构数据,怎么解决?
2 回复
先传过来
更多关于uni-app中slot里面渲染的控件无法使用本页面数据,只能使用传递过来的解构数据,怎么解决?的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在uni-app中,slot内无法直接访问父组件的数据,这是Vue.js的设计机制。可以通过以下方式解决:
-
作用域插槽(推荐) 在子组件中通过
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>
-
使用provide/inject 在父组件中提供数据:
export default { provide() { return { pageData: this.pageData } } }
在子组件slot内容中注入:
export default { inject: ['pageData'] }