84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
当我尝试开发层组件时发生了一些事情。如下代码：
// Wrapper.vue
<模板> P粉794177659 全部回复 (1) 我来回复 关闭 P粉7148900532023-09-02 12:22:06 1 楼 使用 Vue 渲染函数可以更简单地完成：渲染槽 const { createApp, h } = Vue; const Wrapper = { props: { name: { type: String, default: "" }, zIndex: { type: Number, default: 0 }, }, setup(props, { slots }) { let children = slots.default(); if (children) { for (let i = 0; i < children.length; i++) { children[i].props.style = `z-index: ${props.zIndex}`; } } return () => slots.default() } } const App = { components: { Wrapper } } const app = createApp(App) const vm = app.mount('#app') #app { line-height: 2; } [v-cloak] { display: none; } Test 点赞+0 添加回复 关闭回复 P粉794177659 回复
使用 Vue 渲染函数可以更简单地完成：渲染槽
const { createApp, h } = Vue; const Wrapper = { props: { name: { type: String, default: "" }, zIndex: { type: Number, default: 0 }, }, setup(props, { slots }) { let children = slots.default(); if (children) { for (let i = 0; i < children.length; i++) { children[i].props.style = `z-index: ${props.zIndex}`; } } return () => slots.default() } } const App = { components: { Wrapper } } const app = createApp(App) const vm = app.mount('#app')
#app { line-height: 2; } [v-cloak] { display: none; }
Test
使用 Vue 渲染函数可以更简单地完成：渲染槽
const { createApp, h } = Vue; const Wrapper = { props: { name: { type: String, default: "" }, zIndex: { type: Number, default: 0 }, }, setup(props, { slots }) { let children = slots.default(); if (children) { for (let i = 0; i < children.length; i++) { children[i].props.style = `z-index: ${props.zIndex}`; } } return () => slots.default() } } const App = { components: { Wrapper } } const app = createApp(App) const vm = app.mount('#app')#app { line-height: 2; } [v-cloak] { display: none; }