Vue第二部分(1)：组件基础学习

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以为了提高代码复用，我们会把页面的可复用部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

第1个组件案例

有如下需求：在页面上要定义多个记录点击次数的按钮，我们使用之前的所学，可以这么做：

<div id="app"><button @click="increment1">你点了我{{count1}}次，我记住了</button><button @click="increment2">你点了我{{count2}}次，我记住了</button>
</div><script >const vm = new Vue({el:"#app",data:{count1:0,count2:0},methods:{increment1(){this.count1++;},increment2(){this.count2++;}}})
</script>

注意：不同的按钮，必须操作不同的属性，如果使用同1个属性，多个按钮的点击次数会累加到一起。如果按钮的数量要求更多，按照这种方式，无法代码复用，影响开发效率而且代码也不易维护。

解决方案：可以将需要复用的代码定义成组件，通过组件进行复用。
1.注册组件

<script >Vue.component("button-counter",{template:"<button @click='increment'>你点了我{{count}}次，我记住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}})
</script>

通过component方法注册组件
第1个参数表示组件名
第2个参数表示组件的组成，组件本质上也是一个Vue实例，也就可以定义：data、methods等等
组件在定义时，不会和任何页面元素绑定，因此没有el属性。但多了template属性抽取html片段
data必须是一个函数，后面解释

2.使用组件

<div id="app"><button-counter></button-counter><button-counter></button-counter>
</div>

把组件名当作标签直接使用就可以
3.创建vue实例

<div id="app"><!-- 2 使用组件 --><button-counter></button-counter><button-counter></button-counter>
</div><script >//1 注册组件Vue.component("button-counter",{template:"<button @click='increment'>你点了我{{count}}次，我记住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}})//3 创建vue实例const vm = new Vue({el:"#app"})
</script>

因为组件会被多次使用，所以定义组件时，语法上要求data必须是一个函数，每次使用时返回一个新的对象。
组件要在Vue实例中使用，所以最后一定要创建Vue实例。

还有2点需要注意：

组件名如果由多个单词组成，按照规范多个单词全小写，并使用-连接，比如 button-counter。如果使用驼峰命令法，比如 buttonCounter，那么在使用组件时，也需要在单词间添加 -。
组件中 template只能有一个根标签，比如实例中只有一个div根标签。如果又有一个同级的div就会报错。

template:"<div><button>按钮</button><br></div>"                  //对
template:"<button @click='increment'>你点了我{{count}}次，我记住了</button>"    //对
template:"<div><button>按钮<button></div><div></div>"           //错误，2个div根标签

组件的注册方式

组件的注册方式有2种：全局注册和局部注册

1.全局注册

全局注册的组件，可以在不同的Vue实例中使用。语法如下：

<script>Vue.component("组件名",{template:"复用的html片段",data:function(){return {...}//return的对象，类似于创建Vue实例时的data},methods:{//和定义Vue实例时一样，用于定义函数}})
</script>

第1个案例就是全局注册，这里不再演示。

2.局部注册

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册。在Vue实例中添加选项 components 语法如下：

<script>const vm = new Vue({el:"选择器",data:{//属性},components:{//注册局部组件"组件名":{template:"复用的html片段",data:function(){return {...}//return的对象，类似于创建Vue实例时的data},methods:{//和定义Vue实例时一样，用于定义函数}}}});
</script>

示例：

<div id="app"><button-counter></button-counter><button-counter></button-counter>
</div>
<script>const vm = new Vue({el:"#app",components:{"button-counter":{template:"<button @click='increment'>你点了我{{count}}次，我记住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}}}})</script>

3.注册优化

优化1：将组件参数单独抽取成变量
当Vue实例中注册的组件比较多时，Vue实例的代码就会变得非常臃肿，不利于代码管理，此时可以将Vue实例参数抽取成变量。

<script>const buttonCounter = {template:"<button @click='increment'>你点了我{{count}}次，我记住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}};const vm = new Vue({el:"#app",components:{"button-counter":buttonCounter}})</script>

说明：组件注册时，如果组件名和组件变量名同名，还可以简写：

components:{ buttonCounter:buttonCounter }
// ==> 直接只写一个
buttonCounter即可 components:{ buttonCounter }

优化2：将html片段抽取到template标签中
当template中的html片段比较复杂时，在组件参数中直接定义html片段非常麻烦，此时可以将html片段抽取到特殊的template标签中。

<template id="bc"><!-- 再次提示：template标签中也必须只有一个根标签 --><button @click='increment'>你点了我{{count}}次，我记住了</button>
</template>
<script>const buttonCounter = {template:"#bc",data:function(){return {count:0}},methods:{increment(){this.count++;}}};const vm = new Vue({el:"#app",components:{"button-counter":buttonCounter}})</script>

4.组件和is属性（了解）

在html标签中使用组件时，受到 HTML 本身的一些限制。比如table、ul、select内部只能出现特定的子标签，如果在这些标签中使用组件，组件无法正确显示。解决方案：使用is属性

<div id="app"><h4>直接在table中使用table-body组件</h4><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead><!-- 直接使用组件--><table-body></table-body></table><h4>在table中通过is属性使用table-body组件</h4><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead><!-- 通过is属性使用组件 --><tbody is="table-body"></tbody></table>
</div><template id="table-body"><tbody><tr v-for="u in users" :key="u.id"><td>{{u.id}}</td><td>{{u.name}}</td><td>{{u.age}}</td><td>{{u.gender}}</td></tr></tbody>
</template><script>const tableBody = {template:"#table-body",data(){return {users: [{"id":1, "name": "小明", "age": 13, "gender": "男"},{"id":2, "name": "小红", "age": 13, "gender": "女"},{"id":3, "name": "小绿", "age": 4, "gender": "男"}]}}}const vm = new Vue({el:"#app",components:{"table-body":tableBody}})
</script>

注：第二部分的全部内容整合成pdf文档，可以进行下载保存

https://download.csdn.net/download/technologist_28/21114069