1 组件化开发的思想
1.1 组件化开发定义
标准、分治、重用、组合;
标准:开发有统一的标准;
分治:把不同功能封装至不同的组件中;
重用:替换不可用的组件;
组合:将不同组件组合成一体,形成新的产品;
1.2 组件化思想体现
1.3 组件化规范
问题:希望重用代码,自定义组件不易,多次使用组件导致冲突;
Web Components 规范
通过创建封装好功能的定制元素解决上述问题;
Vue 部分实现了Web Components 规范
2 组件的注册方式
2.1 全局组件
2.1.1 注册语法
Vue.component('组件名称',{
data:'组件数据',
template:'组件模板内容'
});
2.1.2 用法
例子:定义一个 button-counter的新组件:
写入html中:
2.1.3 注意事项
<1> data 必须是一个函数;
<2> 组件不能有兄弟关系,必须是单个根元素;
<3> 组件模板内容可以是模板字符串;
模板字符串是 ES6 的语法:
<4> 组件命名方式:
短横线方式:my-component;
驼峰方式:MyComponent,驼峰方式无法在模板字符串中使用 ;
2.2 局部组件
2.2.1 注册
2.2.2 使用
与全局一致;
2.2.3 注意事项
局部组件只能注册在他的父组件中使用;
3 组件间数据交互方式
3.1 父组件向子组件传值
3.1.1 组件内部通过props接收传递过来的值
3.1.2 props属性值类型
props中:
props:['pstr']
template中:
<div>{{ pstr }}</div>
页面中组件内加:pstr=‘pstr’
props:['pnum']
template中:
<div>{{ pnum}}</div>
页面中组件内加:pstr=‘12’
props:['pboolean']
template中:
<div>{{ pboolean}}</div>
页面中组件内加:pboolean=true
parr:['wang',['li'],['zhang']]
props:['parr']
template中:
<ul>
<li :key='index' v-for='(item.index) in parr'>{{ item }}</li>
</ul>
页面中组件内加:parr=‘parr’
pobj:{
name='zhang san',
age=23
}
props:['pobj']
template中:
<div>
<span>{{ pobj.name }}</span>
<span>{{ pobj.age }}</span>
</div>
页面中组件内加:pobj=‘pobj’
3.2 子组件向父组件传值
props 传递数据的原则:单向数据传递;
3.2.1 子组件通过自定义事件向父组件传递信息
在子组件template中加入:
父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize +=0.1'></menu-item>
3.2.2 子组件通过自定义事件向父组件传递信息
在子组件template中加入:
父组件监听子组件事件:
3.3 非父子组件间传值
3.3.1 事件中心
实践中心用来管理组件间的通信;
组件A、B通过事件中心来相互传递数据;
实现事件中心:
var event = new Vue();
3.3.2 监听事件与销毁事件
event.$on('add-todo',add-todo);
event.$off('add-todo');
3.3.3 触发事件
event.$emit('add-todo',id);
4 组件插槽
4.1 组件插槽的作用
4.2 组件插槽的基本用法
4.2.1 插槽位置
插槽使用 来表示:
Vue.component('alert-box',{
template:`
<div>
<strong>错误!</strong>
<slot></slot>
</div>
`
});
4.2.2 插槽内容
<alert-box>出现错误咯!</alert-box>
4.3 具名插槽用法
4.3.1 插槽定义
4.3.2 插槽内容
可以使用 < template> < /template> 标签来进行多条数据填充,且此标签不会渲染到页面上;
4.4 作用域插槽
应用场景:父组件对子组件的内容进行加工处理;
slot-scope
4.3.1 插槽定义
<ul>
<li v-for="item in list" v-bind:key="item.id">
<slot v-bind:item="item">
{{ item.name }}
</slot>
</li>
</ul>