组件化开发思想：
组件化规范： Web Components 规范草案
1.我们希望尽可能多的重用代码
2.自定义组件的方式不太容易（html、css、js）
3.多次使用组件可能导师冲突
Web Components 通过创建封装好的功能定制元素解决上述问题。（目前并没有广泛的被浏览器所支持。）
官网： https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
不同的功能封装到不同的组件当中，不同的组件通过组合完成特定的需求。
Vue实现了部分上述规范。
组件注册：
全局组件注册语法：
Vue.component(组件名称, {
data: 组件数据，
template: 组件模版内容
})
用法：
<div id='app'>
<btn></btn>
</div>
注意事项：
1.data 必须是一个函数。
2.组件模版，必须为单个根元素。
3.组件内容可以是模版字符串。（模版字符串需要浏览提供支持，ES6语法）。
4.组件的命名方式：如果使用驼峰命名，那么在使用组件的时候，只能在字符串模版中使用驼峰的方式使用组件，但是在普通的标签模版中，必须转换成带短横线的标签。
案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id='app'> 15 <btn></btn> 16 </div> 17 18 </body> 19 20 <script> 21 // 组件注册 22 // 定义一个名为btn的组件 23 Vue.component('btn', { 24 data: function () { 25 return { 26 count: 0 27 } 28 }, 29 template: '<button v-on:click="count++">点击了{{count}}次</button>' 30 }) 31 32 var vm = new Vue({ 33 el: '#app', 34 data: { 35 36 } 37 }) 38 </script> 39 40 </html>
局部组件注册：
局部组件只能在注册他的父组件中使用
案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id='app'> 15 <component-a></component-a> 16 <component-b></component-b> 17 <component-c></component-c> 18 </div> 19 20 </body> 21 22 <script> 23 // 局部组件注册 24 var ComponentA = { 25 data: function () { 26 return { 27 msg: 'hello A' 28 } 29 }, 30 template: '<button>{{msg}}</button>' 31 } 32 var ComponentB = { 33 data: function () { 34 return { 35 msg: 'hello B' 36 } 37 }, 38 template: '<button>{{msg}}</button>' 39 } 40 var ComponentC = { 41 data: function () { 42 return { 43 msg: 'hello C' 44 } 45 }, 46 template: '<button>{{msg}}</button>' 47 } 48 49 var vm = new Vue({ 50 el: '#app', 51 data: { 52 53 }, 54 components: { 55 'component-a': ComponentA, 56 'component-b': ComponentB, 57 'component-c': ComponentC 58 } 59 }) 60 </script> 61 62 </html>
组件之间数据交互
1.组件内部通过props接受传递过来的值。
父组件向子组件传值：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id='app'> 14 <div>{{pmsg}}</div> 15 <menu-item title='(parent-component)'></menu-item> 16 <menu-item :title='pmsg'></menu-item> 17 </div> 18 </body> 19 <script> 20 Vue.component('menu-item',{ 21 data: function () { 22 return { 23 msg:'(children-component)' 24 } 25 }, 26 props:['title'], 27 template:'<div>{{msg + title}}</div>' 28 }) 29 30 31 var vm = new Vue({ 32 el: '#app', 33 data: { 34 pmsg:'hello word' 35 } 36 }) 37 </script> 38 39 </html>
props属性名规则：
1.在props中使用驼峰形式，模版中需要使用短横线的形式。
2.字符串形式的模版中没有这个限制。
props属性值类型：
1.字符串类型 string
2.数值类型 number
3.布尔值 boolean
4.数组 array
5.对象 object
子组件向父组件传值：
props 传递数据原则是单向数据流。
1.子组件通过自定义事件向父组件传递信息。
2.父组件监听子组件的事件
<menu-item v-on:hello ='count+1'></menu-item>
案例：子组件向父组件传值，携带参数
<button v-on:click='$emit("hello","abc123")'>button</button>
<menu-item v-on:hello ='$event'></menu-item>
组件之间数据交互：
1.单独的事件中心管理组件间的通讯。
new 一个新的Vue实例对象作为事件中心
var eventHub = new Vue()
2.监听事件与销毁事件
$on 事件监听，第一参数是自定义事件的名称，第二个参数是事件函数。
eventHub.$on('add-todo',addTodo)
$off 事件销毁
eventHub.$off('add-todo')
3.触发事件
$emit 第一个参数为自定义事件名称，第二个参数为事件函数
eventHub.$emit('add-todo', id)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id='app'> 15 <test-tom></test-tom> 16 <test-jerry></test-jerry> 17 </div> 18 19 </body> 20 21 <script> 22 // 事件中心 23 var hub = new Vue() 24 25 Vue.component('test-tom', { 26 data: function () { 27 return { 28 num: 0 29 } 30 }, 31 template: ` 32 <div> 33 <div>Tom:{{num}}</div> 34 <div> 35 <button @click='handle'>点击</button> 36 </div> 37 </div> 38 `, 39 methods: { 40 handle: function () { 41 // 触发兄弟组件的事件 42 hub.$emit('jerry-event', 2) 43 } 44 } 45 }) 46 47 Vue.component('test-jerry', { 48 data: function () { 49 return { 50 num: 5 51 } 52 }, 53 template: ` 54 <div> 55 <div>Jerry:{{num}}</div> 56 <div> 57 <button @click='handle'>点击</button> 58 </div> 59 </div> 60 `, 61 methods: { 62 handle: function () { 63 // 触发兄弟组件的事件 64 hub.$emit('tom-event', 5) 65 } 66 } 67 }) 68 69 var vm = new Vue({ 70 el: '#app', 71 mounted: function () { 72 hub.$on('tom-event', value => { 73 this.num += value 74 }) 75 76 hub.$on('jerry-event', value => { 77 this.num += value 78 }) 79 } 80 }) 81 </script> 82 83 </html>
组件插槽
组件插槽的作用：
父组件向子组件传递内容（类似于React 中的 this.props.children）
1.插槽位置
1 Vue.component('alert-box',{ 2 template:` 3 <div> 4 hello 5 <slot></slot> 6 </div> 7 ` 8 })
2.插槽内容
1 <alert-box>hello</alert-box>
案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id='app'> 14 <alert-box> 15 <alert-item></alert-item> 16 </alert-box> 17 </div> 18 </body> 19 <script> 20 // 插槽位置 21 Vue.component('alert-box', { 22 template: ` 23 <div> 24 <div>box</div> 25 <slot></slot> 26 <div>box</div> 27 </div> 28 ` 29 }) 30 31 Vue.component('alert-item', { 32 template: ` 33 <div> 34 <div>item</div> 35 </div> 36 ` 37 }) 38 39 var vm = new Vue({ 40 el: '#app', 41 data: { 42 43 } 44 }) 45 </script> 46 47 </html>
具名插槽：自 2.6.0 起被废弃 不推荐使用
1.插槽定义
1 <div> 2 <header> 3 <slot name='header'></slot> 4 </header> 5 <main> 6 <slot></slot> 7 </main> 8 <footer> 9 <slot name='footer'></slot> 10 </footer> 11 </div>
2.插槽内容
1 <div> 2 <h1 slot='header'>标题</h1> 3 4 <p>内容</p> 5 <p>内容</p> 6 <p>内容</p> 7 8 <p slot='footer'>底部</p> 9 </div>