一、组件
- 组件 (Component) 是 Vue.js 最强大的功能之一
- 组件可以扩展 HTML 元素，封装可重用的代码
二、 组件注册
2.1 全局注册
Vue.component(组件名称, { data: 组件数据, template: 组件模板内容 })- 全局组件注册后，任何vue实例都可以用
组件基础用法
<组件名称>
2.2 组件注意事项
- 组件参数的data值必须是函数，同时这个函数要求返回一个对象
- 组件模板必须是单个根元素
- 组件模板的内容可以是模板字符串（用反引号包含起来）
2.3 命名方式
- 短横线方式(推荐)
Vue.component('my-component', { /* ... */ }) - 驼峰方式
Vue.component('MyComponent, { /* ... */ })
注意：驼峰方式命名的组件和 一般情况都是可接受的，比如在字符串模版中使用。但直接在 DOM 中使用时只有 是有效的。
2.4 局部注册
- 只能在当前注册它的vue实例中使用
三、Vue 调试工具
链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv
四、 Vue组件之间传值（数据交互）
4.1 父组件向子组件传值
- 子组件内部通过props属性接收传递过来的值
Vue.component(‘menu-item', {
props: ['title'],
template: '{{ title }}'
})
- 父组件通过属性将值传递给子组件
可以传递静态数据
- 在props中定义要接收的属性名时使用驼峰形式，在DOM中直接引入组件时需要使用短横线的形式，字符串形式的模板中则没有这个限制
Vue.component('third-com', {
// 在 JavaScript 中是驼峰式的
props: ['testTitle'],
template: '{{ testTitle }}'
})
Vue.component('menu-item', {
// 在 JavaScript 中是驼峰式的
props: ['menuTitle'],
template: '{{ menuTitle }}
- 传值类型
如果子组件需要得到原始类型，比如数字型、布尔型，在父组件中推荐使用:属性=属性值的形式进行绑定，否则都会传递字符串类型。
{{pmsg}}
- {{item}}
{{pobj.name}}
{{pobj.age}}
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
pstr: 'hello',
parr: ['apple', 'orange', 'banana'],
pobj: {
name: 'lisi',
age: 12
}
}
});
实例
{{pmsg}}
4.2 子组件向父组件传值
- 子组件通过自定义事件向父组件传递信息，用
$emit()触发事件 - 父组件用
v-on监听子组件的事件
直接写事件处理逻辑时使用数据
绑定函数时使用
{{pmsg}}
4.3 兄弟之间的传递
兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心
var eventHub = new Vue() - 接收数据方，通过
mounted(){}钩子中设置监听（注册）事件eventHub.$on('方法名', 数据形参) - 传递数据方触发事件
eventHub.$emit(‘方法名', 传递的数据) - 销毁事件，通过
eventhub.$off()销毁之后，无法进行传递数据eventHub.$off('方法名')
父组件
五、 组件插槽
指父组件向子组件传递模版内容，子组件预留的位置（template中的slot）就叫插槽。而传递给slot的内容就是组件标签之间的内容。
组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
5.1 匿名插槽
有bug发生
有一个警告