Vue全家桶-组件化开发

1.组件化开发思想
* 标准
* 分治
* 重用
* 组合
组件化规范: Web Components
Web Components 通过创建封装好功能的定制元素解决问题

2.组件的注册方式
2.1 全局组件注册语法
Vue.component(组件名称,{
data:组件数据,(函数,return 对象)
template:组件模块内容
})
用法:

<组件名称></组件名称>

2.2 组件注册注意
data 需要为函数,保证每个数据相互独立
组件模板的内容必须是单个的根源
组件模板内容可以是模板字符串
2.3 局部组件注册
只能在注册它的父组件中使用

3.Vue调试工具的用法

4.组件间的数据交互方式
4.1 父组件向子组件传值
1.组件内部通过props接收传递过来的值
Vue.component(‘menu-item’,{
props:[‘title’],
template:’

{{title}}

’
});
2.父组件通过属性将值传递给子组件


3.props属性名规则
* 在props中使用驼峰形式,模板中需要使用短横线的形式
* 字符串形式的模板中没有这个限制
Vue.component(‘menu-item’,{
在JavaScript中是驼峰式的
props:[‘menuTitle’],
template:’

{{ menuTitle }}

’
})
在HTML中是短横线方式的

4.props传递数据原则:单向数据流
4.2 子组件向父组件传值
1.子组件通过自定义事件向父组件传递信息
<button @click=' $emit("enlarge-text"{)}^{\prime }>扩大字体</button>2.父组件监听子组件的事件<menu-item@enlarge-text="fontSize+=0.1"></menu-item>4.3非父子组件间传值1.单独的事件中心管理组件间的通信vareventHub=newVue()2.监听事件与销毁事件eventHub.$on(‘add-todo’,addTodo)
eventHub. $off{(}^{\prime }add-tod{o}^{\prime })3.触发事件eventHub.$emit(‘add-todo’,id)

5.组件插槽的用法
5.1组件插槽的作用
* 父组件向子组件传递内容
hi
1.插槽位置
Vue.component(‘alert-box’,{
template:<div class="demo-alert-box"> <strong>Error!</strong> </div>
})
2.插槽内容
Something bad happend.
6.基于组件的方式实现业务功能