在 vuejs 女巫类中传递多个属性答案

【问题标题】：Passing multiple properties in vuejs witch class在 vuejs 女巫类中传递多个属性
【发布时间】：2019-04-03 17:53:02
【问题描述】：

我正在尝试通过使用全局 mixin 来创建一个考虑 BEM 方法的可重用组件。这是我在这个例子中尝试做的一个活生生的例子https://codesandbox.io/s/ojyym18355

如您所见，我希望能够将多个 props 作为带类的数组传递，因此它将呈现 test test--one，到目前为止只输出最后一个类 test--one。知道如何解决这个问题吗？谢谢！

【问题讨论】：

请澄清你的用例，我不明白你想要什么test-one test-two test == NO - test-one == OK
对不起，如果我对我的问题不够清楚，我在上面的链接中更新了我的示例。如果您检查我的示例以查看源代码，您可以看到在我的第一个示例中它具有“test”类，而我的第二个示例具有“test--one”。现在我想绑定 'test' 和 'test_one' 所以它会同时渲染 'test' 和 'test--one'

标签： vue.js

【解决方案1】：

在您的代码示例中，当您以这种方式v-bind="[test, test_one]" 添加多个绑定时，它会转换为元素上的以下绑定：

class="test"
class="test--one"

这意味着最后一个值会覆盖 class 绑定，而您只剩下一个值 test--one。

作为一种解决方案，类可以以与多个绑定相同的方式传递 - 作为数组或对象。这是一个例子：

请注意，这是更灵活地使用绑定的示例。为了有效地复用组件，mixin的data属性的初始数据格式可能需要调整。

【讨论】：

您好，感谢您的帮助。如果不编写另一个计算属性，就没有办法解决吗？绑定多个props时有没有不覆盖我的类的解决方案？
将此类逻辑从template 标记中移出被认为是一种很好的做法。不过，您可以直接使用一个衬垫绑定class：:class="[test.class, test_one.class]"
我的项目使用 Vuetify 作为框架，这篇文章是一个很好的实践alligator.io/vuejs/passing-multiple-properties。我想做的是为这些组件添加类，以便我编写自己的 css。在我的模板中绑定多个道具是什么好习惯？就像在引导程序中一样，我想写btn btn-primary。
文章呈现传递多个属性的方式与答案中的CodeSandbox解决方案相同。除了绑定 vuetify 道具（如文章建议的那样），您可以将 class 数组绑定为绑定对象中的另一个属性。上面的例子展示了如何使用 props 绑定的灵活性。最终解决方案取决于组件的输入数据（设置）格式。就个人而言，我会为类创建一个单独的计算属性，并将其与绑定的计算属性以及其他属性设置合并到vuetify 组件的 API 可接受的设置中。
在你上面的例子中，我如何在我的外部 mixin 文件中编写这个计算函数？