1.vue组件
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
组件化和模块化的不同:
模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一
组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用
2.全局组件定义的四种方式
第一种使用 Vue.extend 配合 Vue.component 方法:
第二种直接使用 Vue.component 方法:
第三种:将模板字符串,定义到script标签中,使用 Vue.component 来定义组件:
第四种:将模板字符串,定义到自定义标签中,使用 Vue.component 来定义组件:
注意:组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
3. 私有组件定义
这里只介绍了第四种方法私有组件定义,但是其他三种方法都大同小异,私有组件中components 需注意与全局组件相比加了一个‘s’
4.组件中展示数据和响应事件
在组件中,data需要被定义为一个方法,例如:
5.使用component标签,来引用组件,并通过:is属性来指定要加载的组件:
mode 只能应用于组件
6.slot插槽
什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。
6.1普通插槽/默认插槽
6.2具名插槽
添加具体的名字name