Question

我们假设我们有一个组件<my-cp :list="list"></my-cp>

使用这种模板：

<div class="container">
  <slot></slot> 
  <my-cp2 v-for="li in list" :my-data="li.data"></my-cp2>
</div>

我的问题：是否可以使用list作为数组或使用HTML初始化我的组件my-cp？

我的意思是有两种可能性。在这种情况下，HTML将如下所示：

<my-cp>
  <my-cp2 my-data="foo">
  <my-cp2 my-data="bar">
</my-cp>

我试图在安装之前分析插槽的内容，但似乎只有在已经安装了子组件后我才能访问该元素。

Answer 1

将默认内容放在组件的插槽中。如果用户添加了插槽内容，则会显示其内容。否则，将显示插槽内容。

<div class="container">
  <slot>
    <my-cp2 v-for="li in list" :my-data="li.data"></my-cp2>
  </slot> 
</div>

这是example。

修改

在评论中进一步讨论后，我相信我明白你想做什么。为了澄清未来的读者，正如我所理解的那样，@ Naab希望能够使用来自属性的数据或来自组件插槽中HTML中呈现的组件来初始化他的组件。此外，组件应该能够修改现有数据以向其添加更多项目列表。

您可以使用渲染功能执行此操作。

Vue.component("my-cp",{
  props:["list"],
  data(){
    return {
      internalList: this.list
    }
  },
  render(h){
    let workingList = []

    // Examine the default slot, and if there are any parse
    // them and add the data to the workingList
    if (this.$slots.default){
      for (node of this.$slots.default)
        // May want to check here if the node is a myCp2,
        // otherwise, grab the data
         workingList.push(node.componentOptions.propsData.myData)
    }

    // Add any items that came from the property/internal data
    workingList = workingList.concat(this.internalList)

    // Create a list of myCp2 vnodes with the correct data
    const list = workingList.map(n => h(myCp2, {props:{myData:n}}))

    // Create a button to add list items
    const btn = h("button", {on:{click:() => this.internalList.push({bar: true})}}, "Add")

    //Render
    return h("div", [list, btn])
  },
})

这是example。

VueJS：在安装之前分析包含组件的插槽的内容

1 个答案:

修改