vue中的组件的概念
- 一个组件相当于是一个小模块
- 它是
html
、css
与js
的集合体,可以用于描述页面中的某个结构(模块) - 组件是独立存在于我们的vue应用里面的,意味着它可以复用,不需要我们将结构代码或者是业务代码重复的编写,而且也很方便进行维护
- 在Vue中组件的出现是为了拆分Vue实例的代码量,让我们以不同的组件来划分不同的功能模块
全局组件的创建 和 使用
概念:全局组件指的是可以在应用程序中的任何位置使用的组件,在vue中,组件是可复用的Vue实例
语法:
Vue.component(组件名称,组件的配置)
**配置说明(**这里只列举其中两个):
template
:用于描述当前组件的结构data
:用于定义当前组件的关联的数据
一个示例:
Vue.component('mycom', {
// 定义结构
template: `<div>
<h1>我是组件的内容---{{msg}}</h1>
</div> `,
// 定义数据
data() {
return {
msg: 'hello
}
}
}
全局组件的创建 – template
作用:用于描述当前组件的结构,描述结构使用html
细节:template
只能有一个根元素,意味着如果有多个元素,我们需要将其包裹到一个父容器中,这个父容器一般可以使用div
示例:
template: `
<div>
<h1>我是组件的内容---{{msg}}</h1>
<button>点我啊</button>
</div>
`,
报错信息:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
翻译:组件的模板只能包含一个根元素,除非你使用if分支进行判断
解决:将多个元素包裹到一个根元素中,这种根元素一般可以使用div
全局组件的创建 – data
作用:用于定义当前组件所需要使用到的数据
细节:组件的data
必须是一个函数,且返回一个对象,以便每个实例可以维护一份被返回对象的独立拷贝
示例:
data: function () {
return {
成员...
}
}
报错信息:
1.The "data" option should be a function that returns a per-instance value in component definitions.
翻译:组件中的data选项必须是一个函数,同时函数要为每个实例返回一个值
原因:组件是可复用的,为了让每个组件可以维护一个属于自己的数据,要求data必须是一个函数
解决:将data定义为一个函数
2.data functions should return an object
翻译:data函数必须返回一个对象
解决:在data函数中通过return返回一个对象
全局组件的使用
使用方式:
- 组件是html,js,css的集合,类似于一个元素,我们可以将组件作为自定义元素来使用
- 从表现形式上看也确实像使用自定义标签
- 你可以将组件进行任意次数的复用
- 组件要先定义再使用
示例:
<div id="app">
<p>{{msg}}</p>
<!-- 使用组件,就像使用一个标签一样,组件的名称就是这个标签名 -->
<mycom></mycom>
</div>
报错信息:
1.Unknown custom element: <***> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
翻译:未知的用户元素***,你是否正确的注册(创建)了这个组件呢?如果是递归组件调用,那么确保组件有name属性
原因:在我们当前的场景中,是因为你没有在vue实例进行处理之前创建好这个first组件 或者 确实没有创建这个名称的组件
解决:将全局组件在vue实例的 前面 创建好
单文件组件 跟 全局组件 对比
- 从代码及工程化角度考虑
Vue.component
在复杂的项目中有明显的缺点- 全局定义 (
Global definitions
) 强制要求每个 component 中的命名不得重复 - 字符串模板 (
String templates
) 缺乏语法高亮,在 HTML 有多行的时候,需要单独的处理 - 不支持 CSS (
No CSS support
) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏 - 没有构建步骤 (
No build step
) 限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器,如 Pug (formerly Jade) 和 Babel选择器:#id名(# 和 id 之间没有空格)
单文件组件为以上所有问题提供了解决方法,并且还可以使用webpack
或Browserify
等构建工具
- 全局定义 (
- 从公司开发角度而言:
几乎所有的vue项目开发都是使用单文件组件,也就是常说的 组件化开发
组件化开发
- 组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护
- 组件化开发的好处
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
- vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是
.vue
。之前接触到的 App.vue 文件本质上就是一个 vue 的组件 - 在vue中,扩展名为
.vue
的文件也称为单文件组件,意思是使用一个文件来描述一个组件
单文件组件的创建
概念
扩展名为.vue
的文件就是单文件组件
结构说明
单文件组件结构的基本说明
template
:用于描述组件的结构script
:用于添加组件的功能(script行为),使用export default暴露当前的组件实例style
:用于设置组件的样式
细节
关于template
template
模板结构只能有一个根元素(vue2.0中的规则)<template>
是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
关于script
export default
用于暴露当前的组件实例,default表示默认就会暴露的成员- 单文件组件的
data
必须是一个函数,且返回一个对象
关于 style
- 样式
style
可以使用预处理器,scoped
可以用于定义局部作用域样式 - 其中
<style>
标签上的lang="css"
属性是可选的,它表示所使用的样式语言。默认只支持普通的 css 语法,可选值还有less
、scss
等 - 在
<style>
标签上添加lang="less"
属性,即可使用 less 语法编写组件的样式 - 每个组件中必须包含
template
模板结构,而script 行为
和style 样式
是可选的组成部分