- A+
所属分类：Web前端
一.文章导读
前面学习了vue的基础指令，了解了相关的钩子函数，这一章学习vue的组件，组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码，组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
菜鸟教程地址：https://www.runoob.com/vue2/vue-tutorial.html
官网学习地址：https://cn.vuejs.org/
入门学习更加推荐菜鸟
二.组件定义
1.全局组件
<body> <!-- 创建两个承载容器 --> <div id="app"> <my-fristcomponent></my-fristcomponent> </div> <div id="app1"> <!-- 在视图层 直接写组件的标签名就可以调用全局组件 --> <my-fristcomponent></my-fristcomponent> </div> <!-- 值得注意的点是 在js中定义了Vue全局组件在视图层中我们的全局组件必须在创建实例的块中使用 --> <!-- 如下，app2我们没有绑定vue实例所以组件不会生效--> <div id="app2"> <my-fristcomponent></my-fristcomponent> </div> <my-fristcomponent></my-fristcomponent> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 自定义全局组件 my-fristcomponent是自定义组件的标签名 template是模板的意思，后面写组件的内容 */ Vue.component('my-fristcomponent', { template: "<p>我的第一个组件</p>" }); /* 创建 两个vue实例 */ new Vue({ el: "#app" }); new Vue({ el: "#app1" }) </script> </body> 2.组件驼峰命名
<body> <div id="app"> <!-- 在使用组件，如果使用驼峰命名,vue会自动解析，我们 调用时需要用-隔开并使用小写,如下两种方式是可以 --> <Hello-world></Hello-world> <hello-world></hello-world> <!-- 错误 --> <HelloWorld></HelloWorld> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 在创建实例时,我们遵循驼峰命名法 */ Vue.component('HelloWorld', { template: "<p>HelloWorld</p>" }) new Vue({ el: "#app", }) </script> </body> 3.组件data数据
<body> <div id="app"> <data-component></data-component> <button @click="change">改变</button> {{msg}} </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component("dataComponent", { /* 在定义组件时也可以写data,但是data里面必须是一个函数 且这个函数必须有返回值 */ data: function() { return { msg: "data返回值" } }, // 组件中的msg 只可以在该模板中使用 template: '<p >{{msg}}</p>' }) new Vue({ el: "#app", data: { msg: "121" }, methods: { // 定义change返回无法改变组件中的 change: function() { // alert(11); this.msg = "1212"; } } }) </script> </body> 4.局部组件
前面已经写个全局指令，全局过滤器，局部过滤器之类的，所以局部组件与全局组件的区别是一样的，局部组件只能在当前实例才能使用
<body> <div id="app"> <my-component></my-component> </div> <div id="app1"> // my-component组件注册不正确 局部组件不能在其他实例中使用 <my-component></my-component> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", /* data: { msg: "局部指令", }, */ components:{ 'my-component':{ data:function(){ return{ msg:"局部指令" } }, template:"<p>{{msg}}</p>" } } }); new Vue({ el:"#app1" }) </script> </body> 注意：组件模板中的内容只允许存在一个根标签，多了的话只会解析第一个
// 下面模板定义了两个p标签，相当于两个根标签，那么第二个就不会生效 template: '<p >{{msg}}</p> <p>{{msg}}</p> 三.组件之间的传值
1.父组件向子组件传值
- 父组件发送的形式是以属性的形式绑定值到子组件身上。
- 然后子组件用属性props接收
- 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制
<body> <div id="app"> <p>实例中定义的属性内容是: {{pmsg}}</p> #### 下面是组件 <!-- :content 等同于v-bind:content 浏览器打印结果： 我是定义的组件内容 我是标题 父组件内容 --> <!-- 组件定义的模板中使用的值带有props的属性，在视图层使用v-bind绑定 父组件的数据从而形成赋值，也可以不绑定直接赋值 eg：<menu-item title="我自动赋值" content="我自动赋值内容"></menu-item> --> <menu-item v-bind:title="ptitle" :content="pmsg"></menu-item> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // menu-item 定义全局组件 Vue.component('menu-item', { // 组件 用props 属性来接受父组件传递的参数 props: ['title', 'content'], //组件中 的data必须是函数，且有返回值 data: function() { return { msg: "我是定义的组件内容", title: "我是定义的组件的标题" } }, // 定义组件模版 template: '<p><span>{{msg}}</span><br><span>{{title}}</span><br><span>{{content}}</span></p>' }); new Vue({ el: "#app", data: { pmsg: "父组件内容", ptitle: "我是标题" } }); </script> </body> 2.子组件向父组件传值
- 子组件用
$emit()触发事件 $emit()第一个参数为 自定义的事件名称 第二个参数为需要传递的数据- 父组件用v-on 监听子组件的事件
<body> <div id="app"> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div> <!-- 2 父组件用v-on 监听子组件的事件 这里 enlarge-text 是从 $emit 中的第一个参数对应 handle 为对应的事件处理函数 --> <menu-item :parr='parr' @enlarge-text='handle($event)' @shrink-text='shrink($event)' @gain-num="gainNume($event)" ></menu-item> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 子组件向父组件传值-携带参数 */ Vue.component('menu-item', { props: ['parr'], /* data: function() { return { num: 0, } }, */ template: ` <div> <ul> <li :key='index' v-for='(item,index) in parr'>{{item}}</li> </ul> ### 1、子组件用$emit()触发事件 ### 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据 <br> <button @click='$emit("gain-num", 0)'>将子组件的值传递到父组件</button> <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button> <button @click='$emit("shrink-text", 5)'>缩小父组件中字体大小</button> </div> ` }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', parr: ['apple', 'orange', 'banana'], fontSize: 10 }, methods: { handle: function(val) { alert(val) // 扩大字体大小 this.fontSize += val; }, shrink: function(val) { // 缩小 字体大小 this.fontSize -= val; }, gainNume: function(val){ alert(val); } } }); </script> </body> 3.兄弟组件的传递
- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心 var hub = new Vue()
- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
- 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
- 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
简单想象一下兄弟组件,在全局组件中，定义两个全局组件那么这两个组件就是兄弟组件，局部组件也是一样的，在当个实例中可定义多个局部组件组件之间就是兄弟关系
<body> <div id="app"> <div>父组件</div> <div> <button @click='handle'>销毁事件</button> </div> <test-tom></test-tom> <test-jerry></test-jerry> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 兄弟组件之间数据传递 */ //1、 提供事件中心 var hub = new Vue(); Vue.component('test-tom', { data: function() { return { num: 0 } }, template: ` <div> <div>TOM:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function() { //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据) 触发兄弟组件的事件 hub.$emit('jerry-event', 2); } }, mounted: function() { // 3、接收数据方，通过mounted(){} 钩子中 触发hub.$on(方法名 hub.$on('tom-event', (val) => { this.num += val; }); } }); Vue.component('test-jerry', { data: function() { return { num: 0 } }, template: ` <div> <div>JERRY:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function() { //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据) 触发兄弟组件的事件 hub.$emit('tom-event', 1); } }, mounted: function() { // 3、接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名 hub.$on('jerry-event', (val) => { this.num += val; }); } }); var vm = new Vue({ el: '#app', data: { }, methods: { handle: function() { //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据 hub.$off('tom-event'); hub.$off('jerry-event'); } } }); </script> </body> 4.自定义轮播组件
四.组件插槽
- 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
- 插槽标签指令
- 在组件的基础上的一个标签
1.匿名插槽
- 没有被name属性修饰的插槽叫匿名插槽
<body> <div id="app"> <alert-box></alert-box> <!-- 插槽相当于一个默认的占位符,如果没有去修饰值修饰它,它会以默认值展现 --> <alert-box1>{{msg}}</alert-box1> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component("alert-box", { template: ` <div> ###在组件模板中定一个插槽<br> <slot>我是一个插槽</slot> </div> ` }) Vue.component("alert-box1", { template: ` <div> ###虽然我也是一个插槽但是我被占用了<br> <slot>我是一个插槽</slot> </div> ` }) new Vue({ el: "#app", data: { msg:"我要占用插槽" } }); </script> </body> 2.具名插槽
- 被name属性修饰的插槽叫具名插槽
<body> <div id="app"> <table-list> <!-- 在模板内分别为两个插槽填充数据 达到表格效果 --> <template slot='heands'> <th>ID</th> <th>名称</th> </template> <template slot='tablebody'> <tr v-for="l in list"> <td>{{l.id}}</td> <td>{{l.name}}</td> </tr> </template> </table-list> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 定义一个 table 组件 Vue.component('table-list', { // 定义一个模板，定义两个插槽heands 和 tablebody template: ` <table> <tr> <slot name='heands'></slot> </tr> <tbody> <slot name="tablebody"></slot> </tbody> </table> ` }) new Vue({ el: "#app", data: { // 准备初始化数据 list: [{ id: 1, name: '李四' }, { id: 2, name: '张三' }, { id: 3, name: '张飞' }, ] } }) </script> </body> 3.作用域插槽
- 父组件对子组件加工处理
- 既可以复用子组件的slot，又可以使slot内容不一致
<body> <div id="app"> <!-- 1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件， 但样式希望不一样 这个时候我们需要使用作用域插槽 --> <fruit-list :list='list'> <!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps", slotProps在这里只是临时变量 ---> <template slot-scope='slotProps'> <strong v-if='slotProps.info.id==3' class="current"> {{slotProps.info.name}} </strong> <span v-else>{{slotProps.info.name}}</span> </template> </fruit-list> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 作用域插槽 */ Vue.component('fruit-list', { props: ['list'], /* 3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx", 插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。 如果父组件为这个插槽提供了内容，则默认的内容会被替换掉 */ template: ` <div> <li :key='item.id' v-for='item in list'> <slot :info='item'>{{item.name}}</slot> </li> </div> ` }); var vm = new Vue({ el: '#app', data: { list: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'banana' }] } }); </script> </body> 五.习题练习
1.定义轮播组件
<html> <head> <meta charset="utf-8"> <title>自定义轮播组件</title> </head> <style type="text/css"> * { padding: 0; margin: 0; } #slideshow { width: 800px; height: 400px; margin: 50px auto; border: 1px solid black; position: relative; } </style> <body> <div id="slideshow"> <slides-show :images="images" :index="index" :img-style="imgStyle" :show="show" :hide="hide" :prepagestye="prepagestye" :nextpagestye="nextpagestye" :slideshowstyle="slideshowstyle" @prepage='prepage' @nextpage='nextpage' > </slides-show> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component("slides-show", { props: ['images', 'index', 'slideshowstyle', 'imgStyle', 'show', 'hide', 'prepagestye', 'nextpagestye' ], template: ` <div :style="[slideshowstyle]"> <ul v-for="imgs in images" class="slideTable"> <li v-if="index === imgs.id" :style="[show]"> <img :src="imgs.path" :style="[imgStyle]"> </li> <li v-else :style="[hide]"> <img :src="imgs.path" > </li> </ul> <span :style="[prepagestye]" @click='$emit("prepage")'> <img src = "img/上一页.png" alt="vue组件学习" width="30px"> </span> <span :style="[nextpagestye]" @click='$emit("nextpage")'> <img src = "img/上一页.png" width="30px"> </span> </div> ` }) new Vue({ // 绑定父元素 el: "#slideshow", data: { // 定义轮播图片数据 index: 1, images: [{ id: 1, path: 'img/3Dbg01.jpg' }, { id: 2, path: 'img/3Dbg02.jpg' }, { id: 3, path: 'img/3Dbg03.jpg' }, { id: 4, path: 'img/3Dbg04.jpg' } ], // 隐藏显现 hide: { display: 'none' }, show: { display: 'inline' }, //定义图片大小 imgStyle: { width: '100%', height: '400px' }, // 上一页 prepagestye: { width: '35px', position: 'absolute', top: '190px', display: 'inline-block', left: '8px', cursor: 'pointer', }, // 下一页 nextpagestye: { width: '35px', position: 'absolute', top: '190px', right: '8px', cursor: 'pointer', display: 'inline-block', transform: ' rotate(180deg)', }, slideshowstyle: { position: 'relative', width: '100%', height: '400px' } }, methods: { prepage: function() { console.log('11') if(this.index <= 1){ this.index = this.images.length; }else{ this.index = this.index-1; } }, nextpage: function() { console.log('2') if (this.index >= this.images.length) { this.index = 1; } else { this.index = this.index + 1; } } } }) </script> <!-- <style type="text/css"> .slideshowStyele { position: relative; text-align: center; background-color: #fff; list-style: none; width: 100%; height: auto; width: 30px; height: 30px; transform: rotate(180deg); cursor: pointer; display: inline-block; } </style> --> </body> </html> 
