问题标签 [vue-component]

我已经阅读了 VueJS 教程，但我仍然无法提出解决方案。

我有一个列表列表，我想使用手风琴显示它们（这是 vue-strap 的一个组件，之前经过多次测试可以正常工作）。

所以有一个列表，例如：

我期望以下可视化：

清单 1：

• 埃尔 1
• 埃尔 2
• 埃尔 3

清单 2：

• 埃尔 1
• 埃尔 2

清单 3：

• 另一个

但是 VueJS 并没有渲染这个组件……！

代码如下：

我有一个接收项目列表的组件。这些项目中的每一个都将是主要项目中的一个子组件。每个子组件都有一个插槽，我需要在其中分发内容。

如何将每个项目的内容（名称）分配到正确的插槽？

根应用程序：

主要成分：

子组件：

我能做的最好的事情是在所有项目上分发相同的内容：JSFiddle here

有任何想法吗？谢谢！

我不知道如何更好地命名这个主题
，但想法如下。我想为组件显示不同的颜色取决于父类。对于这个项目，我使用 webpack、vue、vue-loader、sass。

我有一个 sass 文件，该文件包含页面的所有设置，特定页面应使用什么颜色

我有一个组件写成vue组件

一个问题是我有很多组件，并且很难一致地支持颜色文件。当我想添加一个新组件或删除一个旧组件时，我总是必须去这个文件并编辑它，这让我很烦

所以我如何看待解决方案是创建一个主文件。

我想用以下风格编写组件

这段代码应该生成

就这样。感谢您的任何建议

是否可以从过滤器中提取变量，并在更改时更新过滤器？就像在计算属性中一样？

我希望能够做类似的事情：

this.currentLanguage并让过滤器在更改时重新编译模板。

显然我可以传入一个额外的参数，但我不想对每个字符串都这样做。

我的代码在切换组件时有效，因此，有没有办法强制重新编译？我正在使用vue-router，但是

不幸的是不会触发重新编译。

我们在 Vue 中有一个组件，它是一个缩放到窗口大小的框架，它包含（在 a 中<slot>）一个元素（通常是<img>或<canvas>），它可以缩放以适应框架并启用对该元素的平移和缩放。

当元素发生变化时，组件需要做出反应。<slot>我们能看到的唯一方法是让父组件在发生这种情况时刺激组件，但是如果组件能够自动检测元素何时发生变化并做出相应反应，那就更好了。有没有办法做到这一点？

我有一个请求，vue.js 的通用组件在与不同父组件通信时的最佳实践如何。

例如，在我的场景中，一个基本的模态组件触发了一个“关闭”方法，但它有两个不同的父组件

我找到了两个解决方案：

1. parent 需要传递一个额外的 prop，然后 baisc 组件只触发事件，该事件的名称是 prop 值，因此可以调用附加的侦听器父组件

2. 在basic modal中只需使用this.$parent来访问父组件方法，或者this.$parent.trigger('xxx')，然后parent就知道该怎么做了

但是，上面两个我觉得都不是很好，第一个可能需要额外传递一个prop，这让其他写第三个，第四个父组件的人使用基本组件不是很方便。第二个可能感觉更硬编码。

那么，在这种情况下是否有更好的解决方案？

我已经制作了组件并保存到不同的“.vue”文件中，并在 elixir / gulp 和 browserify 的帮助下编译它们。

我将所有组件包含在一个 js 文件中，

我想知道如何减少每次在包含应用程序所有组件的每个页面中调用的“build.js”文件的大小。

了解这种仅在需要时才包含组件的方法会很有帮助。

这个问题与 Vue-router 无关

我是 vue.js 的新手

我正在使用 Vuejs 作为前端的中型项目。我正在探索封装/分离可能在许多组件中使用的常用方法的选项包括 mixins 方法和插件方法。
Mixin 方法
我必须在要使用 mixin 方法的每个组件（文件）中编写一个导入语句。这是否会增加最终文件的大小，因为 mixin 将在多个地方导入？我可以this在 mixin 方法中使用。

插件方法
我可以全局安装插件Vue.use(MyPlugin)并在任何组件中使用插件，而无需在每个组件中导入插件。
缺点：我无法this[field]在插件方法中使用。我必须传递调用组件的实例vm才能使用这些方法。

编辑 1 - 包括扩展方法
扩展方法
我可以定义一个基本组件，其中包含将在多个其他组件中使用的所有方法，然后扩展此 BaseComponent 以创建新组件。再次，我需要传入继承组件的实例，在 BaseComponent 中使用的 this 不是指调用/继承组件。

请在下面找到类似于我使用的代码的简单示例：

我的问题：

1. 在每个组件（需要方法）中导入 mixin 文件是一种有效的方法吗？
   多处导入mixin（组件文件）是否会重复包含mixin文件的代码并增加文件大小？

2. 将调用组件的实例vm = this作为参数传递 - 这是一个好习惯吗？将组件实例作为方法参数传递是否会导致任何效率问题？

3. 如何绑定this (instance of the calling/inheriting component)到插件和/或 BaseComponent 中的方法，以便this引用调用/继承组件实例而不是插件/BaseComponent？

4. 哪种方法在性能、干燥度和文件大小方面最有效？

我正在使用 vue.js 和 vue-qrcode 我将一些用户数据存储在 localStorage 中并正确获取。

我尝试将字符串放入模板中，它可以工作，但是 QR 格式不正确。如果我删除变量并仅在 data() val 模型中使用文本，则 QR 是完美的并且可以正常工作。但是，我需要从上面的内容模型中获取 4 个值。

我试图弄清楚如何在 VueJS 中将一个组件放在另一个组件中。例如，像这样的东西，不幸的是不起作用（子组件似乎什么都不做）：

http://www.webpackbin.com/NyI0PzaL-

我对使用内联模板和使用如上所示的 .vue 文件扩展名方法同样感兴趣。

这是上面非工作示例的代码：

main.js

索引.html

应用程序.vue

孩子.vue

尽管上面的示例托管在 webpackbin.com 上，但在我想使用它的两个项目中，我在一个项目中使用 Laravel，在另一个项目中使用 Laravel Spark。在普通的 Laravel 应用程序中，我主要使用 .vue 文件，而在 Laravel Spark 应用程序中，我主要使用内联模板。我会特别感谢任何工作样本。谢谢！

更新

感谢 Linus 在下面的回答。看来我需要这些更改才能在我的main.js文件中全局注册子组件：

或者，为了使子组件保持在本地以在父组件中使用，我可以更改父组件（App.vue），如下所示：