首頁猿問在 Render...

在 Render 函數中構建動態數量的 Vue 插槽

JavaScript

牧羊人nacy 2023-09-28 17:39:05

我正在嘗試從渲染函數構建自定義組件。正在渲染的該組件接受任意數量的槽。在下面的示例中，有三個可用插槽（名為element_1、element_2、element_3）。以下內容Array.reduce()相當于：scopedSlots: { "element_1": () => createElement('div', 'hello world'), "element_2": () => createElement('div', 'hello world'), "element_3": () => createElement('div', 'hello world'),}這是一個精簡的示例Array.reduce()：const records = [ { "index": 1, }, { "index": 2, }, { "index": 3, }]render: function (createElement) { return createElement("replicator-component", { attrs: { elements: records.length}, scopedSlots: records.reduce((a,x) => ({...a, ['element_' + x.index]: () => { createElement( 'div', 'hello world') }}), {}) });},然而沒有任何渲染，也沒有錯誤來指導我。有任何想法嗎？

查看完整描述

3 回答

蝴蝶刀刀

TA貢獻1801條經驗獲得超8個贊

不同之處在于，在您的中reduce，您創建的函數為

() => { createElement( 'div', 'hello world') }

在您的硬編碼版本中（也在forEach@Boussadjra的答案中的循環中），它們被創建為

() => createElement('div', 'hello world')

這實際上是return創建的元素。這與使用無關reduce，這很好。

const ReplicatorComponent = {

template: `<div>

<h1>replicator-component</h1>

</div>`

};

const records = [

{ "index": 1 },

{ "index": 2 },

{ "index": 3 },

];

Vue.component('my-component', {

render: function(createElement) {

return createElement(ReplicatorComponent, {

attrs: {

elements: records.length

scopedSlots: records.reduce((a,x) => ({

...a,

['element_' + x.index]: () =>

createElement( 'div', 'hello world')

}), {})

});

new Vue({

el: '#app',

data: () => ({})

});

<my-component></my-component>

</div>

反對回復 2023-09-28

catspeake

TA貢獻1111條經驗獲得超0個贊

該reduce方法不起作用，因為它之前缺少返回createElement('div', 'hello world')：

完整示例

const ReplicatorComponent = {

template: `

<div>

<h1>replicator-component</h1>

</div>

}

const records = [{

"index": 1,

{

"index": 2,

{

"index": 3,

}

]

Vue.component('my-component', {

render: function(createElement) {

let slotContent = records.reduce((a, x) => ({ ...a,

['element_' + x.index]:

() => {

return createElement('div', 'hello world')

}

}), {})

return createElement(ReplicatorComponent, {

attrs: {

elements: records.length

scopedSlots: slotContent

});

})

var app = new Vue({

el: '#app',

data: () => ({})

})

test

<my-component></my-component>

</div>

反對回復 2023-09-28

aluckdog

TA貢獻1847條經驗獲得超7個贊

我認為作用域插槽應該是props根據 Vue.js 文檔作為參數的函數

export default {

render(createElement) {

// ...

// some other stuff

// ...

// Scoped slots in the form of

// { name: props => VNode | Array<VNode> }

scopedSlots: {

default: props => createElement('span', props.text)

}

所以也許你應該嘗試一下

v-slot你也可以使用 vue 的新統一系統完成同樣的事情

<some-component>

hello {{props}}

</template>

</some-component>

</template>

<div>

</div>

</template>

反對回復 2023-09-28

3 回答
0 關注
254 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Render 函數中構建動態數量的 Vue 插槽

在 Render 函數中構建動態數量的 Vue 插槽

3 回答

添加回答