Vue全家桶之组件化开发
一、组件化开发思想
1.现实中的组件化思想体现-模块化手机
2.编程中的组件化思想体现-各种区块
3.组件化规范:Web Components通过创建封装好功能的定制元素解决上述问题。
我们希望尽可能多的重用代码
自定义组件的方式不太容易(html,css,js)
多次使用组件可能导致冲突
二、组件注册
1.全局组件注册语法
Vue.component(组件名称,{
data: 组件数据，
template: 组件模块内容
})
注册一个名为button-counter的新组件
Vue.component('button-counter'{
data: function () {
return {
count:0
}
},
template: '<button v-on:click="count++">点击了{{count}}次</button>
})
2.组件用法
<div id="app">
<button-counter></button-counter>
</div>
3.组件注册注意事项
①data必须是一个函数
分析函数与普通对象的对比
②组件模块内容必须是单个根元素
分析演示实例的效果
③组件模块内容可以是模板字符串
模板字符串需要浏览器提供支持(es6语法)
④组件命名方式
短横线方式
Vue.component('my-component',{/*...*/})
驼峰方式
Vue.component('MyComponent',{/*...*/})//只能在模板字符串中使用，如果想在html中使用需要转换成短横线
4.局部组件注册
var ComponentA = { /*...*/}
var ComponentB = { /*...*/}
new Vue ({
el: '#app'
components : {
'component-a' : ComponentA,
'component-b' : ComponentB
}
})
三、Vue调试工具
1.调试工具安装
2.调试工具用法
四、组件间数据交互
1.父组件向子组件传值
①组件内部通过props接收传递过来的值
Vue.component('menu-item',{
props: ['title'],
template: '<div>{{title}}</div>
})
②父组件通过属性将值传递给子组件
<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>
③props属性名规则
在props中使用驼峰形式，模板中需要使用短横线的形式
字符串形式的模板中没有这个限制
Vue.component('menu-item',{
//在js中是驼峰式的
props : [menuTitle'],
template: '<div>{{menuTitle}}</div>'
})
在html中是短横线方式的
<menu-item menu-title="nihao"></menu-item>
④props属性值类型
字符串String
数值Number
布尔值Boolean
数组Array
对象Object
2.子组件向父组件传值
①子组件通过自定义事件向父组件传值
<button v-on:click='$emit("enlarge-text") '>扩大字体</button>
②父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontsize += 0.1'></menu-item>
③子组件通过自定义事件向父组件传递信息
<button v-on:click='$?emit("enlarge-text",0.1)'>扩大字体</button>
④父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
3.非父子组件间传值
①单独的事件中心管理组件间的通信
var eventHub = new Vue()
②监听事件与销毁事件
eventHub.$on('add-todo',addTodo)
eventHub.$off('add-todo')
③触发事件
eventHub.$emit('add-todo',id)
五、组件插槽
1.组件插槽的作用
父组件向子组件传递内容
2.组件插槽基本用法
①插槽位置
Vue.component('alert-box',{
template:
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
})
②插槽内容
<alert-box>Something bad happened.</alert-box>
3.具名插槽用法
①插槽定义
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
②插槽内容
<base-layout>
<h1 slot="header">标题内容</h1>
<p>主要内容</p>
<p slot="footer">底部内容</p>
<base-layout>
4.作用域插槽
应用场景:父组件对子组件的内容进行加工处理
①插槽定义
<ul>
<li v-for="item in list" v-bind:key="item.id">
<slot v-bind:item="item">
{{item.name}}
</slot>
</li>
</ul>
②插槽内容
<fruit-list v-bind:list="list">
<template slot-scope="slotProps">
<strong v-if="slotProps.item.current">
{{slotProps.item.text}}
</strong>
</template>
</fruit-list>
六、基于组件的案例
购物车
