组件化的意义:封装(复用,把逻辑隐藏起来,提高可维护性),快速开发(搭积木)
约定:我们通常把那些除了HTML标签以外的自定义组件,才称为‘组件’,结论是,我们说“父组件”“子组件”指的是
本质:就是HTML的扩展。结论:我们在使用组件时,要把它当成HTML一样的感觉来使用
定义一个组件
语法:Vue.component("组件名","选项")
第一个参数,‘组件名’:必须是两个以上的”单词“,并且要用中划线(-)连接
第二个参数,选项:除了el不能用,其他选项都可以使用,比如data,methods,生命周期,watch,computed
template选项:对组件来讲,有一个必须的选项是template,这个选项用于指定当前视图的模板(HTML字符串),在视图模板中可以使用我们学过的所有指令
template视图结构必须是”单一节点“
data选项:组件可以有自己独立的data选项,但是data不再是一个{},必须是一个工厂函数
props选项:props表示由父组件作用域传递过来的‘自定义属性’,接收之后可以通过this访问。所以props数据可以在当前组件中的指令,其他选项中使用,
props:父组件向子组件传递数据,子组件使用props接收,可以传递基本数据类型,引用数据类型
$emit('自定义事件名称','...将要回传给父组件的数据列表'):用于触发一个自定义事件,同时向父组件传递数据
结论:组件化的核心就是"自定义属性props","自定义事件$emit()"+"自定义插槽"
1.props是子组件的一个选项,用于接收父组件给我的自定义属性 =>v-bind,简写为:
2.$emit(),是一个vue api,用于触发父组件给我的自定义事件(向父组件发送数据)=>v-on 简写为@
3.slot,是vue的一个内置组件,可以直接使用,称为”插槽“=>v-slot 简写为#
1.当组件需要向子组件传递参数时,我们使用自定义属性,再在子组件中使用props接收即可
2.当子组件需要向父组件传递数据时,我们使用自定义事件,在子组件中使用$emit()触发并回传数据
自定义事件,在子组件中无需接收,可以直接使用。自定义属性,在子组件必须使用props接收,否则用不了
如何理解插槽?当我们封装自定义组件时,从组件结构的角度看,某些结构是不确定的,那么我们使用slot占个位置。当这组件被真正使用时,才能够确定这个位置放什么元素,这就叫”插槽“(插座,有插孔,但是你不确定插什么)
结论:以后封装组件,哪个地方不确定,就放一个slot占位置。如果有多个地方不确定,就放多个不同的slot
如何区分slot的不同呢?使用”命名插槽“,给slot name=’‘
1.slot默认叫”default“
2.v-slot是一个指令,用于指定用哪个slot来显示当前元素,简写#
3.slot xxx 可以添加任意的自定义属性,在父组件中使用v-slot来获取数据
看结构的不同来确定哪里用slot呀