在我的插槽中包装动态添加的子元素

Posted 2023-02-23

【中文标题】在我的插槽中包装动态添加的子元素

【英文标题】：Wrapping dynamically added child elements in my slot

【发布时间】：2021-07-21 05:46:47

【问题描述】：

如果我有一个带有单个插槽的组件，而不是只渲染它的所有子元素，我想包装每个元素，我会这样做：

Vue.component('MyElement', 
  render: function(createElement)
      for (let i = 0; i < this.$slots.default.length; i++) 
      //create a wrapper element
      let wrappedElement = createElement("div", , this.$slots.default[i]);
      // replace the current element in this slot, with the wrapped element
      this.$slots.default[i] = wrappedElement;
    

    return createElement("div", this.$slots.default);
  

这样使用：

<MyElement ref="myElement">
  <p>Item 1</p>
  <p>Item 2</p>
</MyElement>

最终看起来像这样

<div>
  <div>
    <p>Item 1</p>
  </div>
  <div>
     <p>Item 2</p>
  </div>
</div>

到目前为止一切都很好。

现在，当我想将另一个 <p> 元素插入 <MyElement> 时，使用

// get reference to <MyElement>
const myElement = this.$refs["myElement"];
// create a new element
var newElement = document.createElement("div");
newElement.innerText = "Hiya";
myElement .$el.appendChild(newElement);

新元素不会被包装，因为不会再次调用渲染，我如何才能完全控制插槽中每个子元素的渲染？还是有更好的时机以编程方式将子项附加到组件中？

谢谢

【参考方案1】：

如果您可以考虑为项目创建component。所以当你想添加一个新项目时，你可以创建一个method 来调用项目组件。

我为这个例子做了一个代码片段。

Vue.component('MyElement', 
  template: '#element-container',
);

Vue.component('MyElementItem', 
  template: '#element-item',
  props: 
    innerText: 
      type: String,
      default: '',
    
  
);

new Vue(
  el: '#app',
  data() 
    return 
      items: ['Item 1', 'Item 2', 'Item 3'],
    
  ,
  method: 
    // you can add a method that will add more items, then the MyElementItem component will be invoked.
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-element>
    <my-element-item v-for="(item, index) in items" :key="index" :inner-text="item" />
  </my-element>
</div>

<script type="text/x-template" id="element-container">
  <div>
    <slot></slot>
  </div>
</script>

<script type="text/x-template" id="element-item">
  <div>
    <p> innerText </p>
  </div>
</script>