10.组件进阶

goer ... 2022-01-06

Javascript
Vue

大约 1 分钟

组件进阶

# 组件

组件：提高复用

# 组件注册

先前我的的都是全局注册组件

// 全局组件
// 1. 命名方式
Vue.component('my-component-name', { /* ... */ })
// 2. 命名方式
Vue.component('MyComponentName', { /* ... */ })

<my-component-name></my-component-name> //使用

1
2
3
4
5
6
7

全局注册往往是不够理想的,如果我们没有使用这个组件，他也会被渲染进去，造成了用户下载的 JavaScript 的无谓的增加。

局部注册组件：提高性能

new Vue({
  el: '#app',
  //组件
  components: {
     //组件名称     //templage:''内容
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

//eg
const app = new Vue({
    el:'#app',
    data(){
        return{

        }
    },
    components:{
        'but-com':{
            template:'<h1>hello</h1>',
        },
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 模块系统中局部注册

components 目录下组件在

// 引入组件
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    // 注册
    ComponentA,
    ComponentC
  },
  // ...
}

1
2
3
4
5
6
7
8
9
10
11
12

# 单文件组件

复杂的项目中，文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法

1. 下载npm  node.js的包管理工具（设置淘宝源）
2. vue-cli  vue的项目工具
3. webpack  打包工具

1
2
3

环境搭建：可以去看node这章，有完整的步骤

# 目录结构

node_modules  --- 依赖关系
public        --- 打包后部署到生产环境的目录
src           --- 源码文件
	assets 静态文件
	components 组件目录
	app.vue  入口文件
	main.js  入口配置文件

1
2
3
4
5
6
7

单文件组件

// 组件内容 html
<template>
    
</template>

// 脚本 js
<script>
export default {
    name:'****' //组件名称
}
</script>

// 样式 css
<style>

</style>

// app.vue 引入 注册
import Test from './components/Test.vue'

export default {
  name: 'App',
   // 注册
  components: {
    HelloWorld,
    Test  
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

10.组件进阶

# 组件

# 组件注册

# 模块系统中局部注册

# 单文件组件

# 目录结构

详情