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.子组件通过自定义事件向父组件传递信息
2.父组件监听子组件的事件
eventHub.o f f ( ′ a d d ? t o d o ′ ) 3. 触 发 事 件 e v e n t H u b . off('add-todo') 3.触发事件 eventHub. off(′add?todo′)3.触发事件eventHub.emit(‘add-todo’,id)
【js|Vue全家桶-组件化开发】5.组件插槽的用法
5.1组件插槽的作用
* 父组件向子组件传递内容
hi
1.插槽位置
Vue.component(‘alert-box’,{
template: Error!
})
2.插槽内容
Something bad happend.
6.基于组件的方式实现业务功能
推荐阅读
- Vue.js|VUE全家桶系列之基本知识点
- Vuejs|Vue全家桶之组件基础（二）
- Vuejs|Vue全家桶之Vue核心（一）
- Vuejs|Vue全家桶之Vue CLI入门（三）
- 前端|ES6语法新特性
- vue|Vue + Element UI 实现权限管理系统（页面权限控制（菜单 + 按钮））
- Vue 状态管理与与SSR详解
- 最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
- vue原理初探