vue-组件基础

一、什么组件

组件 (Component) 是 Vue.js 的重要组成部分。能够让你在复杂的应用中拆分成独立模块。使用组件可以扩展 HTML 元素，封装可重用的代码，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。

Vue提供一个组件系统，提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树

开发组件时应当遵循这三点：

高内聚

低耦合

高可用

所谓高内聚，低耦合要求组件内部应当包含所有组件需要的资源，尽量不与其他模块互相依赖，开发者能简单的即插即用。

而高可用则有多种含义：得跑的起来，经得起测试，易于扩展

二、基本使用

1、概要

Vue的组件使用基本分为三个步骤：

创建组件构造器

注册组件

使用组件

image

2、基础使用

html

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n31" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<my-component></my-component>

<my-component></my-component>
</div></pre>
js

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局注册组件
Vue.component("my-component", {
template: "<div id='header'>我是组件</div>"
});

let app = new Vue({
// 挂载
el: '#app',
})
</script></pre>
注意
- 对于组件命名，尽量使用小写，并且包含一个短杠例如my-component,也可以使用MyComponent
- 一定要在挂载的元素区域使用
- 组件是可以复用的

三、注册方式

1、说明

组件常见的注册方式有两种,实际上有7种左右:

全局注册

局部注册

2、全局注册

说明

使用Vue.component()可以注册一个全局组件，这样该组件可以在任意Vue实例下使用,

或者另外一种注册方式，通过全局API：Vue.extend()
语法格式

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="vue" cid="n61" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">Vue.component(id, [definition] )</pre>
参数说明

参数参数类型说明

id 字符串类型设置组件的名字

definition 方法或者Object 组件
示例代码

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n79" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
<app-component></app-component>
</div>
<div id="app1">
<app-component></app-component>
</div>

<script>
/*
- 注意组件最外层只能有一个元素
  Vue.component('app-component', {
  template: "<div id='header'>我是组件</div><div>这样写是错误的</div>"
  });
  */
  Vue.component("app-component", {
  template: '<p>全局注册组件</p>',
  });
new Vue({
el: "#app",
});

new Vue({
el: "#app1"
});

</script>

<div id="app">
<div>小明<button>修改姓名</button></div>
</div>

<div id="app1">
<div>小明<button>修改姓名</button></div>
</div></pre>
总结
- 组件必须有一个templtae选项
- 全局组件必须写在new Vue()创建之前，才在该根元素下面生效
- 模板里面第一级只能有一个标签，不能并行

参数	参数类型	说明
id	字符串类型	设置组件的名字
definition	方法或者Object	组件

3、局部注册

说明

如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。
示例代码

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n96" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">
<div id="app">
<local></local>

</div>

<script>
let localComponent = {
template: '<p>这个是局部注册组件</p>'
};

new Vue({
el: '#app',
components: {
// local 这个名字是用在html中的，说白了就是自定义了一个html 标签而已
'local': localComponent,
// 也可以使用简写方式
// localComponent,
}
})
</script>

<div id="app">
<p>这个是局部注册组件</p>
</div></pre>

4、使用script或template标签

说明

在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。
使用script(了解)

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n105" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<my-component></my-component>
</div>

<script type="text/x-template" id="myComponent">
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</script>

<script>
let myComponent = {
// template选项现在不再是HTML元素，而是一个id(myComponent)，Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译。
template: '#myComponent'
};
new Vue({
el: '#app',
components: {
'my-component': myComponent
}
})
</script></pre>
使用template

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n108" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">

<div id="app">
<my-component></my-component>
</div>

<template id="myComponent">
<div>使用template标签</div>
</template>

<script>
Vue.component('my-component', {
template: '#myComponent'
});

new Vue({
el: '#app'
})
</script></pre>
总结

在理解了组件的创建和注册过程后，我建议使用<template>标签来定义组件的HTML模板。

这杨可以使HTML代码和JavaScript代码是分离的，便于阅读和维护。

在Vue.js中，也可创建.vue后缀的文件，在.vue文件中定义组件，这个内容我会在后面的脚手架搭建的时候会介绍。

5、组件的el和data选项

说明
- 传入Vue构造器选项el、data、computed、watch、methods 以及生命周期钩子等也可以用在 Vue.extend() 或Vue.component()中，不过有两个特例： data 和el。
- Vue.js规定：在定义组件的选项时，data和el选项必须使用函数。
举个栗子

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n125" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
<app-component></app-component>
</div>
<div id="app1">
<app-component></app-component>
</div>

<script>
Vue.component("app-component", {
template: '<div> ' +
'{{name}}' +
'<button @click="changName">修改姓名</button>' +
'</div>',
// 注意data必须是函数
data: function () {
return {
name: "小明",
}
},
methods: {
changName: function () {
this.name = "小红"
}
}
});
// 实例1
new Vue({
el: "#app",
});
// 实例2
new Vue({
el: "#app1"
});

</script>

<div id="app">
<div>小明<button>修改姓名</button></div>
</div>

<div id="app1">
<div>小明<button>修改姓名</button></div>
</div>
</pre>

四、is 特性扩展

说明

什么是is特性,首先得先说Vue的解析器使用的浏览器的的原生模板,原生模板对一些HTML元素了做了一些限制,例如:
- ul ol 只能包含li元素
- table 只能包含thead， tr ，tbody等
- a 不能包含其他交互元素如button等
当有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。在自定义组件中使用这些受限制的元素时会导致一些问题
示例代码

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n142" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<table>

<tbody is="t-component"></tbody>
</table>
<ul>
<li is="p-component"></li>
<li is="p-component"></li>
<li is="p-component"></li>
<li is="p-component"></li>
<li is="p-component"></li>
<li is="p-component"></li>
</ul>

</div>
<script src="js/vue.js"></script>
<script>
/table子组件/
let trComponent = {
template: "<h>is特性演示-table</h>"
};
/* ul子组件 */
let pComponent = {
template: "<p>is特性演示-ul子组件演示</p>"
};
```
new Vue({
    el: '#app',
    // 注册组件
    components: {
        't-component': trComponent,
        'p-component': pComponent
    }
})
```
</script></pre>

五、组件嵌套

说明

在组件中使用components定义子组件，可以定义多个，定义好以后，就可以在组件的模板中使用子组件了
示例代码

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n151" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<app-container/>
</div>

<template id="appContainer">
<div>
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
</template>

<template id="header">
<div>这是头部</div>
</template>

<template id="content">
<div>这个是内容部分</div>
</template>

<template id="footer">
<div>这个是底部</div>
</template>
<script>
```
new Vue({
    el: '#app',
    components: {
        'app-container': {
            /*全局注册父组件*/
            template: '#appContainer',
            /* 注册子组件 */
            components: {
                'app-footer': {
                    template: '#footer'
                },
                'app-content': {
                    template: '#content'
                },
                'app-header': {
                    template: '#header'
                }
            }
        }
    }
});
```
</script></pre>