组件化开发思想
现实中的组件化思想体现
（1）标准
（2）分治
（3）重用
（4）组合
编程中的组件化思想体现
- 组件化规范：Web Components
（1）我们希望尽可能多的重用代码
（2）自定义组件的方式不太容易（html、css和js）
（3）多次使用组件可能导致冲突
官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
组件注册
全局组件注册语法
组件用法
单独使用
重复使用
组件注册注意事项
（1）data必须是一个函数
分析函数与普通对象的对比
（2）组件模板内容必须是单个跟元素
分析演示实际的效果
（3）组件模板内容可以是模板字符串
模板字符串需要浏览器提供支持（ES6语法）
（4）组件命名方式
① 短横线方式
② 驼峰方式
如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件。
局部组件注册
局部组件只能在注册他的父组件中使用。
组件间数据交互
父组件向子组件传值
（1）组件内部通过 props 接收传递过来的值
（2）父组件通过属性将值传递给子组件
（3）props属性名规则
① 在props中使用驼峰形式，模板中需要使用短横线的形式。
② 字符串形式的模板中没有这个限制。
（4）props属性值类型
① 字符串 String
② 数值 Number
③ 布尔值 Boolean
④ 数组 Array
⑤ 对象 Object
注意是否属性绑定
子组件向父组件传值（不带参数）
（1）子组件通过自定义事件向父组件传递信息
（2）父组件监听子组件的事件
子组件向父组件传值（携带参数）
（1）子组件通过自定义事件向父组件传递信息
（2）父组件监听子组件的事件
- 非父子组件间传值
（1）单独的事件中心管理组件间的通信
（2）监听事件与销毁事件
（3）触发事件
参考代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兄弟组件之间数据交互</title> </head> <body> <div id="app"> <div>父组件</div> <div> <button @click='handle'>销毁事件</button> </div> <test-tom></test-tom> <test-jerry></test-jerry> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // 提供事件中心 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() { hub.$emit('jerry-event', 2); } }, mounted: function() { // 监听事件 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() { // 触发兄弟组件的事件 hub.$emit('tom-event', 1); } }, mounted: function() { // 监听事件 hub.$on('jerry-event', (val) => { this.num += val; }); } }); var vm = new Vue({ el: '#app', data: { }, methods: { handle: function() { hub.$off('tom-event'); hub.$off('jerry-event'); } } }); </script> </body> </html>
组件插槽
组件插槽的作用
父组件向子组件传递内容。
组件插槽基本用法
（1）插槽位置
（2）插槽内容
具名插槽用法
（1）插槽定义
（2）插槽内容
- 作用域插槽
应用场景：父组件对子组件的内容进行加工处理。
（1）插槽定义
（2）插槽内容
参考代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作用域插槽用法</title> </head> <style> .current { color: orange; } </style> <body> <div id="app"> <fruit-list :list='list'> <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 type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> Vue.component('fruit-list', { props: ['list'], 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> </html>
网友评论