组件化让代码更加方便组织和管理,并且扩展性也更强
组件化基本使用过程:
创建组件构造器:cpnC = Vue.extend ({template: })
注册组件:Vue.component('标签名','组件名')
使用组件:在html标签里使用
全局组件:在script标签中直接注册
局部组件:在Vue实例中用components属性注册
父组件与子组件,Vue实例属于root组件
注册组件语法糖:Vue为了简化这个过程,提供了语法糖的形式,主要是省去了创建组件构造器Vue.extend()的步骤,直接使用一个对象来代替
组件模板抽离的写法:
使用script的标签:必须使用text/x-template类型
使用template标签:(在template标签中如果有多个标签的话,要同时包含在一个跟标签里,比如说同一个div中)
组件数据的存放:(不能通过在Vue实例中的data属性使用)
组件对象也有一个data属性(也会有mothods等属性)
组件的data属性必须是一个函数,而且这个函数要求返回一个对象,返回的这个对象内部存放数据(必须是一个函数的原因是在使用多次组件时不产生相互影响)
父传子的组件通信:用props属性,既可以传数组类型也可以传对象类型
子传父的组件通信:发射一个事件(自定义事件)
在子组件中,通过$emit( )来触发事件
在父组件中,通过v-on来监听子组件事件
父访问子的组件通信:(父组件访问子组件的某个事件)
$children:得使用下标值去获取,不灵活
$refs:要在标签中写入ref属性去获取。使用灵活
子访问父的组件通信:(子组件访问父组件的某个事件)
$parent:访问到的是挨着最近的父组件
$root:访问到的是根组件,返回的是一个Vue实例的事件
组件的插槽slot:为了让t封装的组件更具有扩展性
编译作用域:父组件模板所有东西都会在父级作用域内编译,子组件模板所有东西都会在子级作用域内编译
作用域插槽的使用:
具名插槽:给slot标签一个name属性,在使用时传入对应name的slot属性
作用域插槽:父组件对子组件传过来的插槽不满意,可以在父组件的插槽中改动
网友评论