关于前端:Vue中如何注册全局组件和局部组件详解

2次阅读

共计 794 个字符,预计需要花费 2 分钟才能阅读完成。


Vue 注册组件有两种,一种是 全局组件 ,一种是 部分组件 。整个我的项目常常用到的用全局写法 ( 长处: 屡次应用, 不便省事),而应用部分组件的状况比拟少(除须要专供特定页面)。

注册全局组件:

当你注册完之后,能够在任何组件中间接应用标签,而不须要在各个组件中引入并部分注册 通常公共组件放在 src 文件夹下的 components 文件夹中,这里的组件进行全局注册。

办法步骤:

1、在 src 文件夹中新建 components 文件夹,components 文件夹中个别寄存组件文件.
2、在文件夹中新建 components.js 文件
3、在 components.js 文件引入所有要注册的全局组件
4、在 main.js 中引入 components.js 文件并应用 Vue.use() 全局注册

代码演示: -components.js 文件中

import 组件名字 A from '@/components/ 组件名字 A' 
import 组件名字 B from '@/components/ 组件名字 B' 

export default (Vue)=>{Vue.component("组件名字 A", 组件名字 A)  // 前者必须是字符串格局
  Vue.component('组件名字 B', 组件名字 B)  
}

在 main.js 引入插件

import components from '@/components/components.js'

Vue.use(components)

new Vue({// ...})

全局组件的应用(间接应用)

< 组件名称 ></ 组件名称 >

注册部分组件:

页面中公有的组件放在各自的页面文件夹中并应用上面代码部分注册

import ComponentA from './ComponentA'
import ComponentB from './ComponentB'
export default {
  name: "part",
  components: {ComponentA, ComponentB},
}
正文完
 0