Vue组件
components --> module --> views(pages)
一、组件概念❤️
1 - 组件是什么
- 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码；
2 - 组件化思想
- 把页面上
可重用的部分封装为组件，从而方便项目的 开发 和 维护
3 - 封装组件的目的
- 复用
- 可维护
3 - 总结
- 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)
二、组件的基本使用❤️
将功能抽象出来（涵盖结构 逻辑 样式）封装进一个单独的.vue文件
1 - 注册组件✅
1.1 - 全局注册
- 全局注册组件后, 就可以当做标签在任意Vue文件中template里用
- 单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用组件里封装的标签替换到这个位置
复制代码
1
2
3// main.js Vue.component(名字, 组件);
复制代码
1
2
3
4
5// 引入 提示 组件 @代表src路径 import Hint from '@/components/Hint.vue' // 注册全局组件 Vue.component('HintG', Hind);
1.2 - 局部注册
复制代码
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<template> <div id="app"> <h1> {{ titleInfo }} </h1> <!-- 使用组件 --> <HintL /> <!-- 使用组件 --> <hint-l /> </div> </template> <script> // 引入组件 import Panel from './components/Hint.vue'; export default { // 注册组件 components: { HintL: Hint, }, data () { return { titleInfo: 'Vue-组件', }; }, }; </script>
2 - 使用组件
复制代码
1
2
3
4
5<!-- 使用组件 --> <HintL /> <!-- 使用组件 --> <hint-l />
最后
以上就是受伤枕头最近收集整理的关于Vue组件Vue组件一、组件概念❤️二、组件的基本使用❤️的全部内容，更多相关Vue组件Vue组件一、组件概念❤️二、组件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复