我想给VNode到data的子对象分配一些属性和类.这很管用.但在我的Vue期间.js调查，我还没有看到这样的模式在使用，这就是为什么我不认为这是一个好主意，修改 children VNode的.
但这种方法有时会派上用场——例如，我想为默认插槽中的所有按钮指定aria-label属性.
请参见下面的示例，使用默认有状态组件:
Vue.component('child', {
template: '<div>My role is {{ $attrs.role }}</div>',
})
Vue.component('parent', {
render(h) {
const {
default: defaultSlot
} = this.$slots
if (defaultSlot) {
defaultSlot.forEach((child, index) => {
if (!child.data) child.data = {}
if (!child.data.attrs) child.data.attrs = {}
const {
data
} = child
data.attrs.role = 'button'
data.class = 'bar'
data.style = `color: #` + index + index + index
})
}
return h(
'div', {
class: 'parent',
},
defaultSlot,
)
},
})
new Vue({
el: '#app',
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<parent>
<child></child>
<child></child>
<child></child>
<child></child>
<child></child>
</parent>
</div>下面是使用stateless个功能组件的示例:
Vue.component('child', {
functional: true,
render(h, {
children
}) {
return h('div', {
class: 'bar'
}, children)
},
})
Vue.component('parent', {
functional: true,
render(h, {
scopedSlots
}) {
const defaultScopedSlot = scopedSlots.default({
foo: 'bar'
})
if (defaultScopedSlot) {
defaultScopedSlot.forEach((child, index) => {
child.data = {
style: `color: #` + index + index + index
}
child.data.attrs = {
role: 'whatever'
}
})
}
return h(
'div', {
class: 'parent',
},
defaultScopedSlot,
)
},
})
new Vue({
el: '#app',
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<parent>
<template v-slot:default="{ foo }">
<child>{{ foo }}</child>
<child>{{ foo }}</child>
<child>{{ foo }}</child>
</template>
</parent>
</div>我在等待以下答案:
是的，你可以使用它，这种方法没有潜在的问题.
是的，但这些问题可能会发生.
不，有很多问题.
UPDATE:
我发现的另一个很好的方法是将child VNode包装到另一个创建的VNode中，并使用适当的数据对象，如下所示:
const wrappedChildren = children.map(child => {
return h("div", { class: "foo" }, [child]);
});
使用这种方法，我不怕修改 children VNode岁.
提前谢谢你.