vue中import组件名根据什么来的 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

vue中import组件名是根据组件的命名约定来的。在vue中，通常会给每一个组件文件(.vue文件)定义一个唯一的名称，然后可以通过import语句将该组件引入到其他地方使用。

在vue中，组件的命名约定有两种常见的方式：驼峰式命名和短横线分隔式命名。

驼峰式命名：
驼峰式命名是指将每个单词的首字母大写，并将单词连接在一起，形成一个唯一的名称。例如，一个组件的文件名为Header.vue，那么在引入该组件时，可以使用以下方式：
```
import Header from './Header.vue';
```
短横线分隔式命名：
短横线分隔式命名是指将每个单词之间使用短横线(-)进行分隔，形成一个唯一的名称。例如，一个组件的文件名为header-menu.vue，那么在引入该组件时，可以使用以下方式：
```
import HeaderMenu from './header-menu.vue';
```

无论是采用驼峰式命名还是短横线分隔式命名，都需要保证组件文件名与import语句中给出的名称一致，以确保导入正确的组件。

需要注意的是，import语句中的路径 './Header.vue' 或者 './header-menu.vue' 是根据组件文件所在的相对路径来确定的，请确保路径正确。

通过以上命名约定和import语句的使用，我们可以轻松地在vue中引入并使用各个组件。

2年前 0条评论

worktile

Worktile官方账号

在Vue中，使用"import"语句来引入组件。引入组件时，组件名的来源有两种情况：

自定义组件：自定义组件的组件名由开发者根据需要自行命名。在组件的定义中，开发者可以使用"export default"语句来将组件导出，并在引入组件时使用"import"语句进行引入。

例如，在一个名为"HelloWorld.vue"的文件中，可以定义一个名为"HelloWorld"的组件，并将其导出：

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

然后，在其他组件中使用"import"语句引入该组件：

import HelloWorld from './HelloWorld.vue'

在这里，"HelloWorld"是开发者为组件命名的名称。

第三方组件库：使用第三方组件库时，组件名通常是库作者事先定义好的，并且按照一定的规则进行命名。开发者需要根据第三方组件库的文档来引入对应的组件。

例如，在使用Element-UI组件库时，可以按照以下方式引入"Button"组件：

import { Button } from 'element-ui'

在这里，组件名"Button"是Element-UI库作者定义的。

总结起来，Vue中import组件名的来源是根据开发者自定义的组件名或是按照第三方组件库作者定义的组件名来确定的。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，使用import语句来引入组件。组件的引入方式取决于组件的定义方式，有全局注册和局部注册两种方式。

全局注册组件：

全局注册的组件可以在任何Vue实例中直接使用，无需额外引入。

在全局注册组件时，通常会使用Vue的Vue.component方法或者通过import语句引入组件文件。

使用Vue.component方法全局注册组件的示例如下：
```
// 引入组件文件
import ComponentName from './ComponentName.vue';
// 全局注册组件
 Vue.component('component-name', ComponentName);
```
这样就可以在任意Vue实例的模板中使用<component-name></component-name>标签来调用该组件。
局部注册组件：

局部注册的组件只能在特定的Vue实例中使用，需要在组件所在的Vue实例中进行引入。

在局部注册组件时，通常会使用import语句引入组件文件，在Vue实例的components属性中注册组件。
```
// 引入组件文件
import ComponentName from './ComponentName.vue';
// 在Vue实例中注册组件
export default {
  components: {
    'component-name': ComponentName
  }
}
```
这样就可以在该Vue实例的模板中使用<component-name></component-name>标签来调用该组件。
动态引入组件：

在某些场景下，需要根据条件动态加载组件。Vue提供了import()方法来实现动态引入组件。
```
// 动态引入组件
const Component = () => import('./ComponentName.vue');
```
动态引入的组件可以通过Vue的异步组件(component: Component)或者路由的懒加载来使用。例如：
```
export default {
  components: {
    'lazy-component': () => import('./ComponentName.vue')
  }
}
```
在模板中使用<lazy-component></lazy-component>标签来调用该组件。

总结：在Vue中，使用import语句引入组件，可以根据需要选择全局注册、局部注册或动态引入组件的方式来使用组件。

2年前 0条评论