第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在 Render 函數(shù)中構(gòu)建動態(tài)數(shù)量的 Vue 插槽

在 Render 函數(shù)中構(gòu)建動態(tài)數(shù)量的 Vue 插槽

牧羊人nacy 2023-09-28 17:39:05
我正在嘗試從渲染函數(shù)構(gòu)建自定義組件。正在渲染的該組件接受任意數(shù)量的槽。在下面的示例中，有三個可用插槽（名為element_1、element_2、element_3）。以下內(nèi)容Array.reduce()相當(dāng)于：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') }}), {})  });},然而沒有任何渲染，也沒有錯誤來指導(dǎo)我。有任何想法嗎？
查看完整描述

3 回答

?
蝴蝶刀刀

TA貢獻1801條經(jīng)驗 獲得超8個贊

不同之處在于，在您的 中reduce，您創(chuàng)建的函數(shù)為

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

在您的硬編碼版本中（也在forEach@Boussadjra的答案中的循環(huán)中），它們被創(chuàng)建為

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

這實際上是return創(chuàng)建的元素。這與使用無關(guān)reduce，這很好。

const ReplicatorComponent = {

  template: `<div>

    <h1>replicator-component</h1>

    <slot name='element_1'></slot>

    <slot name='element_2'></slot>

    <slot name='element_3'></slot>

  </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: () => ({})

});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>


<div id="app">

  <my-component></my-component>

</div>


查看完整回答
反對 回復(fù) 2023-09-28
?
catspeake

TA貢獻1111條經(jīng)驗 獲得超0個贊

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


完整示例


const ReplicatorComponent = {


  template: `

 <div>

    <h1>replicator-component</h1>

    

    <slot name='element_1'></slot>

    <slot name='element_2'></slot>

    <slot name='element_3'></slot>

 </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: () => ({})

})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>


<div id="app">

  test


  <my-component></my-component>

</div>


查看完整回答
反對 回復(fù) 2023-09-28
?
aluckdog

TA貢獻1847條經(jīng)驗 獲得超7個贊

我認(rèn)為作用域插槽應(yīng)該是props根據(jù) Vue.js 文檔作為參數(shù)的函數(shù)


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)

    },

  }

}


所以也許你應(yīng)該嘗試一下


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


<!-- page component -->

<template>

  <some-component>

    <template v-for="slot in scopedSlots" v-slot:[slot]="props">

      hello {{props}}

    </template>

  </some-component>

</template>


<!-- some-component.vue -->


<template>

  <div>

    <slot v-for="slot in Object.keys($slots)" :name="slot"></slot>

  </div>

</template>


查看完整回答
反對 回復(fù) 2023-09-28
  • 3 回答
  • 0 關(guān)注
  • 265 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號