Vue全家桶之组件化开发 Vue全家桶之组件化开发

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: '
})
2.组件用法
【Vue全家桶之组件化开发】

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: '{{title}}
})
②父组件通过属性将值传递给子组件

③props属性名规则
在props中使用驼峰形式，模板中需要使用短横线的形式
字符串形式的模板中没有这个限制
Vue.component('menu-item',{
//在js中是驼峰式的
props : [menuTitle'],
template: '{{menuTitle}}'
})
在html中是短横线方式的

④props属性值类型
字符串String
数值Number
布尔值Boolean
数组Array
对象Object
2.子组件向父组件传值
①子组件通过自定义事件向父组件传值

②父组件监听子组件的事件

③子组件通过自定义事件向父组件传递信息

④父组件监听子组件的事件

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:

Error!

})
②插槽内容
Something bad happened.
3.具名插槽用法
①插槽定义