Javascript Vue组件作为另一个组件的子组件

我正在将现有主题转换为可重用组件

我目前有一个按钮组件，如下所示：

<template>
    <a :href="link" class="button" :class="styling"><slot></slot></a>
</template>

<script>
export default {
    props: {
        link: {},
        styling: {
            default: ''
        }
    }
}
</script>

<vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>

导出默认值{
道具：{
链接：{}，
样式：{
默认值：“”
}
}
}

在我的HTML中，我是这样使用它的：

<template>
    <a :href="link" class="button" :class="styling"><slot></slot></a>
</template>

<script>
export default {
    props: {
        link: {},
        styling: {
            default: ''
        }
    }
}
</script>

<vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>

按钮1

现在，我正试图使用现有的按钮组件创建一个“按钮组”

我希望能够做到的是：

<vue-button-group styling="radius tiny">
    <vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>
    <vue-button link="#" styling="tiny bg-aqua">Button 2</vue-button>
    <vue-button link="#" styling="tiny bg-aqua">Button 3</vue-button>
    <vue-button link="#" styling="tiny bg-aqua">Button 4</vue-button>
</vue-button-group>

按钮1
按钮2
按钮3
按钮4

我对VueJS非常陌生，对于如何正确处理这样的事情感到有点困惑。我希望能够根据需要将尽可能多的按钮组件传递到组中

以下是迄今为止我对按钮组的了解：

<template>
    <ul class="button-group" :class="styling">
        <li><slot></slot></li>
    </ul>
</template>

<script>
    export default {
        props: {
            styling: {
                default: ''
            }
        }
    }
</script>

导出默认值{
道具：{
样式：{
默认值：“”
}
}
}

当然，这对于传入的单个按钮是有效的，但我似乎无法理解如何在将每个按钮封装在其自己的列表项中时允许更多的按钮

---

如果您对我的工作方式有任何建议或更正，我们将不胜感激。谢谢。

一个可能的解决方案是使用

按钮{{Button}

这是你的电话号码

从那里，您可以自己构建

-组件；将“元信息”作为（在我的小提琴中，

数据部分的数组）传递到
中

如果您想渲染按钮之外的其他内容，并且希望为此注入组件，那么这是有意义的。否则，插槽将一无所获。
您也可以尝试使用插槽






除此之外：

<vue-button-group class="radius tiny">
    <template slot="buttons">
       <vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>
       <vue-button link="#" styling="tiny bg-aqua">Button 2</vue-button>
       <vue-button link="#" styling="tiny bg-aqua">Button 3</vue-button>
       <vue-button link="#" styling="tiny bg-aqua">Button 4</vue-button>
   </template>
</vue-button-group>


按钮1
按钮2
按钮3
按钮4
Vue实现这一点的方法是使用名称插槽，并向父级提供子级使用的数据。数据将通过
插槽作用域
传播到子级

关键是数据从父级流到子级

以下是该过程的工作代码笔：

此示例使用默认插槽，因此父级或子级上不需要
name
属性

父母亲




...
道具：{
项目：阵列
}

小孩

{{scope.item.text}
...
数据：{
项目：[{text:'Button 1'}，{text:'Button 2'}，{text:'Button 3}]
}
由于您希望对组件的输出执行高级操作，因此现在可能是时候了，因为它们提供了更大的灵活性：


Vue.component（'button-group'{
道具：{
样式：{
默认值：“”
}
},
render（createElement）{//createElement通常称为'h'`
//你也可以在一行中完成这项工作，但解释起来更复杂。。。
//const children=this.$slots.default.filter（slot=>slot.tag）.map（slot=>createElement（'li'，{}，[slot]））
const children=[]；
for（设i=0；i

。彩虹背景{
/*todo:实现彩虹背景*/
边框：红色1px实心；
}
.按钮组{
边框颜色：蓝色；
}

你好
你好吗？
我很好
祝您有个美好的一天！
作为一个方面，您不需要通过
style=“tiny bg-aqua”
类是自动绑定的，因此使用
class=“tiny bg-aqua”
具有相同的结果，因此可能有几种方法来处理此问题（插槽、命名插槽、道具），最佳解决方案将取决于您如何构建数据，你想要的最终结果是什么。@Daniel你是100%正确的。我不知道您可以在Vue组件上使用“class”属性，而不必在默认情况下覆盖组件中包含的基类。明白了，我误解了这个问题这对Vue来说并不完全是直截了当的。我建议使用渲染函数，但它们对初学者不太友好。我建议，如果这是可以用css解决的问题，那么实现和维护起来可能会更容易。但是，这不是会将所有4个按钮都呈现在同一个列表项中吗？这就是我目前面临的问题。抱歉，但我很难理解v-for在这种情况下是如何工作的；无需将按钮的数量硬编码到组件本身中（就像在小提琴中一样）。正如我所说的，您可以从父级传递一个数组作为道具，并且您的按钮组在道具上迭代。这个数组可能是动态的。与在按钮组组件本身中进行循环相比，这种方法给表带来了什么？哈，快告诉我吧。。。无论如何，这里有一个指向renderFunction解决方案的codesandbox的链接（减去文本节点的处理），这肯定比我预期的要高级，但它确实可以根据需要工作。谢谢你的回答和解释。将来我肯定会更多地研究渲染函数。@Daniel您仍然告诉我，在使用
.vue
文件时，您不必担心这些文本节点，我只是碰巧发现，当我开始使用html模板来回答这个问题时，它们很烦人。但是为这些添加一个过滤器可以防止坏的保险
<template>
    <ul class="button-group" :class="styling">
        <li v-for='item in items'><slot :item='item'></slot></li>
    </ul>
</template>

<script>
   ...
   props:{
      items: Array
   }
</script>

<vue-button-group class="radius tiny" :items='items'>
    <template slot-scope='scope'>
       <vue-button link="#" styling="tiny bg-aqua">{{scope.item.text}}</vue-button>
   </template>
</vue-button-group>


<script>
   ...
   data:{
      items:[{text:'Button 1'},{text:'Button 2'},{text:'Button 3}]
   }
</script>