vue 设置组件不重用_构建Vue组件以供重用

最新推荐文章于 2024-03-03 18:56:50 发布

weixin_26750481

最新推荐文章于 2024-03-03 18:56:50 发布

阅读量499

点赞数

文章标签： vue react javascript 小程序 python ViewUI

原文链接：https://levelup.gitconnected.com/structuring-vue-components-for-reuse-c6f2444b6167

版权

vue 设置组件不重用

VueJS is an ultra-flexible front-end JavaScript framework for Single Page Applications, below is a small suggestion for how to structure pieces of your app to make them a little more manageable.

VueJS是用于单页应用程序的超灵活的前端JavaScript框架，以下是有关如何组织应用程序片段以使其更易于管理的小建议。

VueJS is pretty lenient regarding how you structure your application, especially compared to Angular which has relatively strict guidelines for creating your application with modules & components.

VueJS在如何构建应用程序方面非常宽容，特别是与Angular相比，后者具有相对严格的准则来使用模块和组件创建应用程序。

VueJS, on the other hand, doesn’t care. Out of the box, the Vue CLI (with router options) creates a very basic folder structure for you to get started with. It adds a src folder with sub-folders for views and components (amongst other things).

另一方面，VueJS不在乎。 Vue CLI(带有路由器选项)开箱即用，创建了一个非常基本的文件夹结构供您入门。它添加了一个src文件夹，其中包含用于查看和组件(以及其他内容)的子文件夹。

Components that exist in either folder are the same in structure and how they work. The two folders purely exist as a guideline on how best to separate your components.

每个文件夹中存在的组件在结构和工作方式上都相同。这两个文件夹纯粹是作为如何最好地分离组件的指南。

数据成分 (Data components)

Stored in src/views/

存储在src/views/

Here are your routed components. Components that are imported into your router file and used as entry points should all be placed within here.

这是您的路由组件。导入路由器文件并用作入口点的组件都应放在此处。

Components in here should access data, whether it lives in your Vuex store or via direct access to your APIs.

无论数据位于Vuex存储区中还是通过直接访问API来访问，其中的组件都应访问数据。

I tend to have these components add structure to the page layout. They set up various containers, rows, columns & general layout. They then import the presentation components and pass all the gathered data down into them.

我倾向于让这些组件为页面布局添加结构。他们设置了各种容器，行，列和总体布局。然后，他们导入演示文稿组件并将所有收集的数据向下传递到它们中。

These components are often the ones used for handling interaction as well. Any changes to data (such as form submissions) will get passed back up to these components which then interact with any APIs or the store.

这些组件通常也是用于处理交互的组件。数据的任何更改(例如表单提交)都将传递回这些组件，然后与任何API或商店进行交互。

演示组件 (Presentation components)

Stored in src/components/

存储在src/components/

These are as dumb as a bag of hammers! They know not where the data comes from nor what they do with the data. All they do is receive data via props and emit results via events.

这些就像一袋锤子一样笨！他们不知道数据来自何处，也不知道如何处理数据。他们所做的只是通过道具接收数据并通过事件发出结果。

Right here is where your reuse comes from. Because these components should be completely devoid of access to the state, they become ultra-portable, not only between data sources but also between applications.

就在这里，您的重用来自哪里。由于这些组件应完全避免访问状态，因此它们不仅可以在数据源之间而且可以在应用程序之间变得超便携式。

Frameworks such as Vuetify are great examples of purely presentational components. They accept data via props and emit when events such as click or search occur, for you to then handle within your application.

诸如Vuetify之类的框架是纯演示组件的绝佳示例。它们通过prop接收数据，并在发生单击或搜索等事件时发出，以便您在应用程序中进行处理。

In an ideal world, everything would eventually boil down to a presentational component.

在理想的世界中，一切最终都将归结为呈现性的组成部分。

App.vue would set up the initial layout and create a router-view...

App.vue将设置初始布局并创建一个路由器视图...

views/SomePage.vue would retrieve the data it needs and pass it to the SomeTable.vue...

views/SomePage.vue将检索所需的数据并将其传递给SomeTable.vue ...

components/SomeTable.vue would display the data and pass events back up when the sorting is changed...

更改排序时， components/SomeTable.vue将显示数据并传递事件备份...